属性
display:inline 行级元素。 1.多个元素占一行 2.行级元素不可以设置宽高
display:block
display：inline-block 行级块元素 1.多个元素占一行 2.可以设置宽高
display:none 隐藏 空间也不占了
visibility：hidden 隐藏 但是空间还占着 visible 出现
一、浮动 float 浮动的元素回脱离文档流 空间释放
清除浮动 用clear left 清除左浮 clear right 清除右浮
清除塌陷
1.在浮动元素的后面加上clear 加上一个div 清除浮动
2.设置.clearfix::after {
clear:both;
content:"";
display:block;
}。需要给谁清除浮动就把谁的名字命名为clearfix
3.给父元素设置 overflow：hidden 原意为溢出隐藏，但是因为触发了BFC块级化格式上下文 就会按照bfc的规则渲染画面 bfc规则为浮动的元素也参与计算高度
4.手动给父元素添加高度
二、选择器优先级
1.内联样式优先级最高 权重1000
2.id选择器优先级其次 权重100
3.class选择器 权重10 但十个class选择器的优先级也没有id选择器高
4.标签选择器 权重1
三、各种选择器
1.id 选择器
id 属性不要数字开头 id是唯一的，不能重复
2.class 选择器
class类选择器 选中一类
3.后代选择器(以空格 分隔) 用于选取某元素的后代元素
4.亲子代选择器(以大于 > 号分隔） 只能选择作为某元素后一级的元素
5.相邻兄弟选择器（以加号 + 分隔） 选择紧接在另一元素后一级的元素，且二者有相同父元素
6.普通兄弟选择器（以波浪号 ～ 分隔 选定所有指定元素之后的相邻兄弟元素
7.伪类选择器 :hover
8.伪元素选择器 行元素 必须要写content：''；
外部样式表，当样式需要应用到很多页面挺好。
内部样式表，当单个文档需要特殊的样式时挺好
9.属性选择器
[标签] 是把包含该标签的所有元素设置样式
[ title~=hello] 意为元素中有hello 才会被设置样式
[ title|=hello] 意为元素中有hello 才会被设置样式
四、css盒模型 内容+padding+border+margin
1.标准盒模型（框模型）
width属性=内容的宽度
2.怪异盒模型 IE6及以下的浏览器不加DCTYPE html 时表现出来的样子
width属性=内容的宽度+padding+border
box-sizing:border-box 怪异盒模型
box-sizing:content-box 标准盒模型
五、定位 position
relative 相对定位
1.相对自己的初始位置
2.定位后空间不释放
absolute 绝对定位
1.位置相对于最近已经被定位的祖先元素 如果没有就相对于body
2.定位后空间释放
fix定位
1.位置相对于可视窗口
2.定位后空间释放
六、html页面加载顺序
先解析head标签，从开始运行就会下载这些被引用的外部文件。从开始运行就会下载这些被引用的外部文件。
当head中代码解析完毕，就会开始解析body中的代码，当body中的代码全部执行完毕，并且整个页面的css样式加载完毕后，css会重新渲染整个界面的html元素。
七、布局
1.flex弹性布局
任何一个·容器都可以被指定为flex布局，当父盒子设置为flex布局后，子元素的float属性，clear属性，vertical-align属性失效
布局原理
通过给父盒子添加flex属性，达到控制子盒子的位置和排列方式
常见父项属性
默认主轴方向是水平方向 ，侧轴方向是垂直方向
flex-direction 有row 从左到右 row-reverse 从右到左 column 从上到下 column-reverse 从下到上
2.justify-content 设置主轴上子元素的排列方式
3.flex-warp设置子元素是否换行
nowarp不换行· warp换行
4.align-items 设置侧轴上的子元素排列方式（单行）
5.align-content 设置侧轴上的子元素的排列方式（多行）
常见子项属性
1.flex属性
定义子项目分配剩余空间 用flex来表示占多少份数
2.align-self属性
控制子项自己在侧轴上的排列方式
3.order属性 排列
八、图片加链接
用一个块包着img和a标签 子绝父相 给父亲定位后 子规定宽高 x y坐标即可
九、商品摆放
用div外包居中等操作 里面放上ul标签 给ul标签清除浮动 clearfix li规定属性
网友评论