定义:
层叠样式表,用于设计风格和布局。
引入方式:
- 行内样式:style=“color:red”
- 内部样式表:<style></style>
- 外部样式表:<link rel="stlyesheet" type="text/css" href="mystyle.css">
选择器:
1.通用选择器:*
2.标签选择器:p,div
3.id选择器:#id
4.class选择器 :.class
5.属性选择器:
- 用于选取带有指定属性的元素:div[title]
- 含指定属性值的元素 [属性名="属性值"] 例如: p[title="abc"]
- 属性值以指定内容开头的元素 [属性名^="属性值"] 例如: div[class^="abc-"]
- 属性值以指定内容结尾的元素[属性名&="属性值"] 例如: div[class$="bc"]
- 包含指定内容的元素 [属性名*="属性值"] 例如: div[class*="bc"]
- 可以对所有带有 alt 属性的图像应用样式,从而突出显示这些有效的图像:img[alt]
- 具体属性值选择:a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
- 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词:img[src|="figure"]
6.派生选择器:
- 后代选择器:div span{}
- 子元素选择器:p>.box{}
- 相邻兄弟元素选择器:后一个---span+p{},后所有---span~p{}
7.组合选择器:
交集:p.box1{}
并集:.box1,.box2{}
8.伪选择器: p::after{} a:hover{}
选择器优先级:!important>内部样式>id选择器>类选择器>标签选择器>通配符选择器>继承>浏览器默认
属性:
单位:
- px:像素
- em:相对于元素的字体大小 (font-size),pixels/16=em
- rem:相对于根元素的字体大小(相对于浏览器的基准字体大小)
- vw:相对于视口宽度的1%
- vh:相对于视口高度的1%
a标签:
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
背景background:
- background-color: 背景颜色
- background-image: 背景图片
- background-repeat: 重复背景图片
- background-attachment: 是否固定或者随着页面的其余部分滚动
- background-position: 背景图片的位置
- background-size: 背景的尺寸
- background-origin: 背景图片定位区域
- background-clip: 背景图片绘制区域
background的值的顺序是background-color,background-image,background-repeat,background-attachment,background-position。
文本:
水平对齐:text-align,垂直对齐:vertical-align,间距:letter-space(字符间距),word-space(字间距),line-height,修饰线:text-decoration,大小写:text-transform。
字体:
serif:衬线字体。
sans-serif:无衬线字体。
font:italic small-caps bold 12px/30px(fontsize/lineheight) serif;
列表:
无序列表ul,有序列表ol,里面用li。
简写属性:list-style: square inside url("sqpurple.gif"); [ list-style-type list-style-position list-style-image]。
内联元素/块状元素
内联元素:inline,不会独占一行,转换为块状元素用display:block。
块状元素:block,会独占一行,转换为内联元素用display:inline。
注意:
width和height只对block生效,对inline无效,可把内联元素变为inline-block再设置。
margin和padding只对inline的左右生效,对上下无效。
文档流:
标准流:从上到下排列。
浮动流:float浮动。
定位流:position的absolute和fixed定位。
盒子模型:
盒子模型:
box-sizing:content-box;
包括content(width和height),padding,border,margin。
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距。
一般浏览器也都默认为标准盒子模型。
IE盒子模型:
box-sizing:border-box;
width和height为指定内容区域+border+padding。
需要根据实际项目设定。
浮动:
设置浮动:float:left,right;
清除浮动:clear:left,right,both;
清除浮动带来高度塌陷的方法:
1.额外标签法:在最后一个浮动元素的末尾添加一个空的标签,例如
<div style="clear: both"></div>
,或者其它标签(如<br/>
等)。2.在父级盒子上添加 overflow 属性。
3.:after 方法:给父元素添加clearflex类名。
.clearflex::after{
content:"";
clear:both;
display:table;
}
定位:
static:静态,不会被定位,根据页面正常流进行定位。
absolute:相对于最近的定位祖先元素进行定位。
fixed:相对于视口定位。
relative:相对于其正常位置进行定位。
sticky:根据用户的滚动位置进行定位。
层叠规则:
从后到前:background/border--负z-index--block块状水平盒子--float浮动盒子--inline/inline-block水平盒子--z-index:auto/z-index:0--正z-index
BFC和IFC机制:
BFC(Block Formatting Context)块级格式化上下文
布局规则:
- 内部的盒子会在垂直方向,一个个的放置。
- 盒子垂直方向的距离由margin决定,属于同一个的BFC的两个相邻Box的上下margin会发生重叠。
- 每个元素的左边,与包含盒子的左边相接触,即使存在浮动也是如此。
- BFC的区域不会与float重叠。
- BFC就是页面上一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也如此。
- 计算BFC的高度时,浮动元素也参与计算。
产生BFC的元素:
- 根元素
- float属性不为none;
- position为absolute或fixed
- display为inline-block,table-cell,table-caption,flex;
- overflow不为visible。
IFC(Inline Formatting Context)行级上下文
规则:
- 内部的盒子在水平方向,一个个的放置
- IFC的高度,由里面最高的盒子高度决定。
- 当一行不够放置的时候会自动切换下一行。