2019-01-03
2019-01-12 本文已影响0人
陳先生_2211
一、css
1.css引入方式(3+1)
1)行内(style 属性)
2)页内(style 标签)
3)页外(link标签:记住rel=stylesheet)
4)@import(css语法 只能写在css里面,不建议使用 会造成页面抖动)
2.盒子模型(w3c盒子模型+ie盒子模型)
1)w3c盒子模型
描述hmtl中元素组成和占位大小的模型
包括:content padding border margin
border-sizing:border-box;宽高代表:content+padding+border
2)ie盒子模型(了解)
3.浮动(float:布局方面,解决块级不能同一行显示的问题)
1)脱离文档流(从上到下,从左到右)(普通流、浮动流、定位流),不再占有原来的位置
2)浮动元素到哪里停下:父块边界和其他浮动元素(紧挨着上一个浮动元素)
3)副作用:因为脱离文档流,不占用原来的位置,所以撑不开父级(造成高度崩塌,为0)
4)清除浮动
(1.新建空div,设置css属性clear:both
(2.给父级设置overflow:hidden
(3.利用伪对象清除浮动
利用伪对象清除浮动:
.son{
float: left;
}
.father::after{
content:" ";
height: 0;
display: block;
clear: both;
}
/*
* 利用伪元素清除浮动
* after:在父级内的最后一个地方新建一个元素*/
4.css选择器
*通配符
.class类名
#id id
,群组选择器
[]属性选择器
关系选择器:
空格 子孙关系
> 儿子关系
~ 兄弟关系(不会往上找)
+ 相邻兄弟