一、引用CSS
-
1）行内样式：直接写在标签中的style中.形如<《body style=“color:black;”>》,选择器和括号省略。(经常用的一种)
-
2）页内样式：style标签内中写css代码。形《style>》 body{} 《/style》 .位置在head里
-
3)外部引用:xxx,css文件写css语句，html中link标引入。link标签习惯放在head标签。
离标签越近的css。优先级越高，行内高，外部最低场景简单的html建议页内样式，复杂正式产品建议外部样式
link 标签 href引用css文件 type属性（可rel- relation关联 )
href属性和rel属性必须写才能有效 rel=stylesheet 样式表。缩写
引用方式区别：行内样式写多之后html和css藕合，利于维 护
《link href=“#”type=“text/css” rel“stylesheet”》
二、选择器
-
标签选择器
#{
###:#;
}
#,#,#{
###:#;
} -
后代/派生选择器
- —{
###：#;
}
- —{
-
ID选择器（唯一）
id=’#~~’~ {
#
###:#;
} -
class类选择器（常用）
.###{
###:#;
} -
属性选择器
[##="###"]{
###:#;
} -
子代选择器
#＞###{
###：#;
} -
a标签的状态
a:link
未访问的链接
a:hover
当鼠标悬停在链接上
a:active
被选择的链接
（鼠标单击瞬间较短，一般不需要定义）
a:visited
已访问过的链接
-
伪类选择器
.#:##{
###:#;
} -
孩子选择器
场景，表格的第一行加粗，最后一行，隔行变色。
:##-## 相当于当前元素的父元素的一个子元素。
：##-##-##父元素中符合选择器的所有元素的最后一个
#{
###：#;
}
#:##-###{
###:#;
}
#:##-##-###(1) {
###:#;
}
三
-
优先级：!important>行内样式>id选择器>类选择器>标签选择器
!important属性:important重要的。行内样式优先级虽高，但因为乱不建议使用，而外部样式如果一段css不生效不知道是选择器写错还是声明语句写错。加上!important修饰后，是那句css语句优先级变为最高。
相同优先级，后面的语句块会覆盖掉前面的 -
背景字体
text-indent属性: ##px;行缩进
text-align属性: left;文字内容对齐
font-size: ##px;文字大小
cover属性：平铺网页 -
边框
border-color: red;
border-style: solid;
默认值none，
solid固体 实心线。
dotted点线。
dashed虚线
radius半径（变圆角）
border框边的大小
margin外边距
padding内边距top顶部
left左
right右
bottom 底部 -
DIV盒子布局
div的css属性:网页比较复杂时,把网页分成一个个的区域 ，div不设置height，这样div的高度等于文字高度+上内边框+下内边距
margin:1）div兄弟同级别，与div之间的外边框的距离。 外边距时重叠的算较大的
2）div父子嵌套，子div的边框到父div的边框距离。默认0px，body也是同样的容器
margin: 外边距
padding：内边距
auto：居中
solid：固体，这里的意思是实心线。
dotted：点线。
dashed：虚线
border：边框
auto:自适应居中
-
div盒子重叠
。。position定义基准物
。。外边距重叠
。。父容器面积大于子容器，子div显示在父div上层，靠左上角显示，左边框、上边框。 -
元素溢出
overflow:###;
visible：可见的
hidden：隐藏溢出的内容
scroll：滚动条
overflow：溢出 -
默认文档流
- 块级标签：div p H1-h6 form table tr td ul ol li header section footer
有width、height 样式属性，“不管有没有设置width都会独占一行”；height不设置的话由内容撑起，设置且高于内容会溢出，高于内容、内容到border会一些空白。 注意不设置height值并且div中无内容会导致高度0不可见 - 行级标签：span，a，input，button,img,
在一行显示，视觉高由内容决定。如果几个标签高度不一样的话下对齐。行级标签没有 宽高样式属性…display属性可以将行级元素转换成跨级或行内块元素。 - 行内块：一行排列，且具备宽高。相当于行级元素块级元素的特点综合。
display样式属性：auto标签本身特点;block块；
line行级；inline-block可以让标签在三种状态间切换。
想让span标签有背景体积：先让标题H1显示在一行。
display ：inline-block;
四浮动
-
浮动
float:left浮动
float 浮动会脱离默认的文档流”浮动层和默认的文档层就好像ps工具中的两个图层，互相不搭理
场景，从左到右。ul标签构造菜单导航；网页分栏两三个div横向排列 -
浮动的那一组div最后加上br标签，因为br标签自带clear样式。
-
清除点点下划线
navbar
list-style-type: none; 清除点点
text-decoration: none;清除下划线
clear：both 清除浮动 -
浮动的那一组div后添加一个空内容div上设置“clear：both”；样式清除浮动。后面的div按照默认文档流排列，没有跟流动去重叠。
-
伪类选择器(推荐）浮动的那一组的div的父div上作用clear样式。清除浮动。后面的div按照默认文档流排列，但跟浮动的div发生重叠。
-
多媒体
自适应布局：媒体查询@media screen and (max-width:600px){}媒体类型指设备类型，大部分已废弃，我们主要判断的screen电脑，手机屏幕。参考：更多媒 体类型和判断属性自适应网页：随着浏览器宽度减少布局由5列变为2列、1列。
非适应网页：手机预览下列数不变，网页内容缩放得太小看 不清。
自适应布局实现：一行4列的，一个作品div占25%宽度，随着浏览器宽度变窄，想让作品div宽度变为100%，
自适应布局优点：提升体验，缺点不同设置不同宽度判断条件，媒体查询的代码需要写很多，后面将会被“弹性布局”技术替代
语义化标签
本质也是容器，完全等价div。新增的语义化标签不必刻意使用，扥div搭配使用header头部
nav导航
article文章
section章节
aside侧边栏
footer底部
绝对、相对定位
display改变标签块、行级特性，浮动float，position位置属性实现更多功能。 position属性：auto，默认值，默认文档流,div独占一行，多个div从上到下排列。 absolute绝对定位绝对定位
绝对定位，适合比较特殊位置不好布局的div；个人测试。
absolute 绝对定位:排列一组div是计算坐标麻烦，不如float。不适合大量使用。
绝对定位之后拥有 tOp left right bottom属性
- 往往搭配absolute使用，只是这是的绝对定位不相对body偏移，而是相对它们定义relative的父容器偏移。
相对定位
relative相对定位：适合重叠、溢出的div关系，特殊布局的div，比绝对定位参照物更近。
理解关键：绝对定位和相对定位“参照物是谁”“相对谁”定位.
-
被relative作用的往往是一个父容器，作为“相对基准”如果找不到定义，那么基准还是body。
-
衍生功能：div重叠问题，绝对定位或相对定位可能会导致div重叠问题或网页需求要求。
-
实现思路：一个容器下有想要重叠的多个div，这些div经过绝对或相对定位后脱离文档流，再配合top、left属性调整它们的位置使之重叠。
-
z-index属性：控制div重叠时先后顺序，取值一般-1到 999.约大的值div越靠前。
-
fixed 固定：悬浮窗，场景，网页便上的浮动工具条，返回顶部、客服等功能。被fixed修饰的div固定在页面，不随浏览器滚动而滚动。
-
注意，被fixed修饰后，本质上变为absolute。默认高度岁默认文档流，注意默认top可能非常大，
建议赋值top、left、right、bottom让这个div固定在某一位置
隐藏元素
visibility：hidden；
-
visibility: hidden; visible可见的。 隐藏元素，占据空间。
-
display: none; 浏览器不加载。隐藏元素，不占据空间。
hidden属性：浏览器不应显示已规定 hidden 属性的元素
none属性：没有，啥也没有，空了，不存在。
2293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
