前端css一点学习心得
1：选择器：
元素 A，
id .，
类 #，
兄弟选择器（a~b,a+b），
子选择器A B，
包含选择器A > B
2：css的使用方式
1，通过style标签在head中键入内部样式表(Internal style sheet)
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
2，link元素引入外部样式表(External style sheet)
3，直接在元素中使用style键入内联样式(Inline style)
这是一个段落。
3：css的背景
颜色，图片，位置，是否重复，是否固定
background-color
background-image
background-repeat
background-attachment
background-position
4：链接
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
5：盒子模型
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
div {
background-color: lightgrey;
width: 100px;
height:100px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
元素的宽和高跟盒子的属性没有关系，是控制元素在body中的宽和高
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
6：Display(显示) 与 Visibility（可见性）
h1.hidden {visibility:hidden;}
h1.hidden {display:none;}
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
7：内联元素和块元素
块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
块级元素主要有：
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有：
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
可变元素(根据上下文关系确定该元素是块元素还是内联元素)：
applet ,button ,del ,iframe , ins ,map ,object , script
CSS中块级、内联元素的应用：
利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个：
display:block – 显示为块级元素
display:inline – 显示为内联元素
display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将
-
元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
8：定位
position 属性指定了元素的定位类型。
position 属性的四个值：
static HTML元素的默认值，即没有定位，元素出现在正常的流中。
relative 相对定位元素的定位是相对其正常位置。可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。
fixed 元素的位置相对于浏览器窗口是固定位置。
absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:
“CSS” 列中的数字表示哪个CSS(CSS1 或者CSS2)版本定义了该属性。
属性 说明 值 CSS
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 autolength%inherit 2
clip 剪辑一个绝对定位的元素 shapeautoinherit 2
cursor 显示光标移动到指定的类型 urlautocrosshairdefaultpointermovee-resizene-resizenw-resizen-resizese-resizesw-resizes-resizew-resizetextwaithelp 2
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 autolength%inherit 2
overflow 设置当元素的内容溢出其区域时发生的事情。 autohiddenscrollvisibleinherit 2
overflow-y 指定如何处理顶部/底部边缘的内容溢出元素的内容区域 autohiddenscrollvisibleno-displayno-content 2
overflow-x 指定如何处理右边/左边边缘的内容溢出元素的内容区域 autohiddenscrollvisibleno-displayno-content 2
position 指定元素的定位类型 absolutefixedrelativestaticinherit 2
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 autolength%inherit 2
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 autolength%inherit 2
z-index 设置元素的堆叠顺序 numberautoinherit 2
相对定位
.box1 {
border: 1px solid black;
background-color: red;
height: 100px;
width: 100px;
margin: 10px;
}
.box2 {
border: 1px solid black;
background-color: green;
height: 100px;
width: 100px;
margin: 10px;
position: relative; –相对定位 ：定位元素的位置相对于它在普通流中的位置进行移动
left: 80px;
z-index: 1;
}
.box3 {
border: 1px solid black;
background-color: yellow;
height: 100px;
width: 100px;
margin: 10px;
position: relative; –相对定位
top: -100px;
}
.box4 {
border: 1px solid black;
background-color: yellow;
height: 100px;
width: 100px;
margin: 10px;
}
绝对定位
父元素有相对定位，则参照父元素的位置进行绝对定位
父元素无，则参照body的位置进行绝对定位
父元素为.box 参照父元素位置
<%@ page language=”java” contentType=”text/html; charset=UTF-8”
pageEncoding=”UTF-8”%>
Insert title here
.box {
border: 1px solid black;
position:relative;
}
.box1 {
border: 1px solid black;
background-color: red;
height: 100px;
width: 100px;
margin: 10px;
position:absolute;
top:100px;
}
.box2 {
border: 1px solid black;
background-color: green;
height: 100px;
width: 100px;
margin: 10px;
}
.box3 {
border: 1px solid black;
background-color: yellow;
height: 100px;
width: 100px;
margin: 10px;
}
.box4 {
border: 1px solid black;
background-color: #ffffff;
height: 100px;
width: 100px;
margin: 10px;
}
没有父元素 参照body位置
<%@ page language=”java” contentType=”text/html; charset=UTF-8”
pageEncoding=”UTF-8”%>
Insert title here
.box {
border: 1px solid black;
}
.box1 {
border: 1px solid black;
background-color: red;
height: 100px;
width: 100px;
margin: 10px;
position:absolute;
top:100px;
}
.box2 {
border: 1px solid black;
background-color: green;
height: 100px;
width: 100px;
margin: 10px;
}
.box3 {
border: 1px solid black;
background-color: yellow;
height: 100px;
width: 100px;
margin: 10px;
}
.box4 {
border: 1px solid black;
background-color: #ffffff;
height: 100px;
width: 100px;
margin: 10px;
}
9：浮动
属性 描述 值 CSS
clear 指定不允许元素周围有浮动元素。 leftrightbothnoneinherit 1
float 指定一个盒子（元素）是否可以浮动。 leftrightnoneinherit 1
float浮动是脱离了盒子，游离在盒子之外的一种存在方式
10：伪类，伪元素
所有CSS伪类/元素
选择器 示例 示例说明
:checked input:checked 选择所有选中的表单元素
:disabled input:disabled 选择所有禁用的表单元素
:empty p:empty 选择所有没有子元素的p元素
:enabled input:enabled 选择所有启用的表单元素
:first-of-type p:first-of-type 选择每个父元素是p元素的第一个p子元素
:in-range input:in-range 选择元素指定范围内的值
:invalid input:invalid 选择所有无效的元素
:last-child p:last-child 选择所有p元素的最后一个子元素
:last-of-type p:last-of-type 选择每个p元素是其母元素的最后一个p元素
:not(selector) :not(p) 选择所有p以外的元素
:nth-child(n) p:nth-child(2) 选择所有p元素的第二个子元素
:nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素
:nth-last-of-type(n) p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n) p:nth-of-type(2) 选择所有p元素第二个为p的子元素
:only-of-type p:only-of-type 选择所有仅有一个子元素为p的元素
:only-child p:only-child 选择所有仅有一个子元素的p元素
:optional input:optional 选择没有”required”的元素属性
:out-of-range input:out-of-range 选择指定范围以外的值的元素属性
:read-only input:read-only 选择只读属性的元素属性
:read-write input:read-write 选择没有只读属性的元素属性
:required input:required 选择有”required”属性指定的元素属性
:root root 选择文档的根元素
:target #news:target 选择当前活动#news元素(点击URL包含锚的名字)
:valid input:valid 选择所有有效值的属性
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个
元素的第一个字母
:first-line p:first-line 选择每个
元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的
元素
:before p:before 在每个
元素之前插入内容
:after p:after 在每个
元素之后插入内容
:lang(language) p:lang(it) 为
元素的lang属性选择一个开始值