目录
页面布局常用选择器
- id选择器：#id
- 类选择器：.Class
- 关系选择器：div p,div>p,div,p
- 伪类选择器：hover
- 结构性伪类选择器：E:after、E:before、E:nth-child()、E:first-child、E:last-child
页面布局常用属性：
- 字体属性：font-size
- 文本属性：text-docoration、text-align
- 首行缩进：text-indent
- 行高:line-height
- 宽高属性：width、height、min-height、max-height
- 背景属性：background
- 列表属性：list-style
- 字体颜色：color
- 定位属性:position
- 布局属性:display
- 浮动属性：float、clear
- 盒子模型:border、margin、padding
- 圆角模型：border-radius
- 阴影:text-shadow、box-shadow
浮动元素
- 浮动元素的外边缘不会超过其父元素的内边缘
- 浮动元素不会互相重叠
- 浮动元素不会上下浮动
- 任何元素一旦浮动，display属性将完全失效均可以设置宽高，并且不会独占一行
浮动定位：
- 将元素排除在普通流之外
- 元素将不在页面中占据空间
- 将浮动元素放置在包含框的左边或者右边
- 浮动元素依旧位于包含框之内
- 浮动的框可以向左或者向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止
CSS清除浮动
- 清除浮动是在使用了浮动之后必不可少，为了网站布局的效果，清除浮动也变得非常麻烦
- 属性：clear
- 值：left、right、both
清除浮动的常用方式：
- 结尾处加空div标签 clear：both(或在下一个元素上加clear:both;)
- 浮动元素的父级div定义：overflow:hidden
- 浮动元素的父元素定宽高
position
position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型
absolute：生成绝对定位元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过“left”“top”“right”以及“bottom”属性进行规定
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过“left”“top”“right”以及“bottom”属性进行规定
relative：生成相对定位的元素，相对于其正常位置进行定位，因此，“left:20”会向元素的LEFT位置添加20像素
static:默认值，没有定位，元素出现在正常的流中（忽略top、bottom、left、right、或者z-index声明）
相对定位：
以当前为参照物为移动指定的距离
注意：相对定位，被定位的元素会占据原有的物理位置
绝对定位：
绝对定位的元素不会占据原有的物理位置，以其他元素作为参考物移动指定距离的定位方式
关于绝对定位的参考点：
1.如果元素外层元素是非static（有了除默认值以外的定位设置），那么这个外层元素就成为该元素的定位参考点
2.如果元素的外层元素没有设置任何position的值，那么该元素将寻找距离自己最近的其他设定过position的外层元素作为参照物（必须为嵌套层）
3.如果该元素的外层元素没有任何一个元素采用position定位，那么此时定位参考元素变为body或者说页面
z-index
设置定位元素z轴的距离（定位元素的显示顺序）
z-index属性只支持定位元素
display属性
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为块元素，而span元素的默认display属性值为“inline”，称为“行内”元素
块元素与行元素是可以转换的，也就是说display的属性值可以由我们来改变
块状元素：具有宽高属性，并且独占一行
行内块元素：具有宽高属性，不会独占一行
行内元素：不具有宽高属性，不会独占一行
display常见的属性值：
none:隐藏对象
inline：指定对象为内联元素
block:指定对象为块元素
inline-block:指定对象为内联块元素
table-cell:指定对象作为表格单元格
flex:弹性盒
隐藏和显示元素：
visibility：
visible:显示
hidden：隐藏
display：
none：隐藏
block：块元素
注意：visibility和display：none区别：visbility的隐藏方式不仅隐藏了内容的显示，其占用的空间依旧占用，用dispaly：none的隐藏方式是彻底隐藏该元素的内容和位置
visibility和display：none，opacity:0(设置透明度)区别：
visibility：hidden和opacity:0会将元素隐藏，当时物理空间实际存在
display:none:隐藏元素，不保留物理空间
盒子模型：
盒子模型是css中一个重要的概念，理解了盒子模型才能有更好的排版，W3C组织建议吧网页上元素看成是一个个盒子。盒模型主要定义四个区域：内容（content）、内边距（padding）、边框（border）、外边框（margin）。可以拿手机盒来对比，手机=内容，内边距=盒子中的填充物，边框=盒子的厚度，外边距=两个手机盒之间的距离
通常我们设置的宽和高是content的宽高
W3C盒模型
盒模型由内容(content)，填充(padding)，边框(border)，边界(margin)组成
外边距：
围绕在元素边框（border）周围的空白区域
- 会在元素外创建额外的空白区域
- 外边距是透明的
语法：margin：value；
单边设置
- margin-top/right/bottom/left:value;
- value可取值为像素，%，auto，负值
margin设置元素外边距的宽度，它有这么几个特点：
- 块级元素的垂直相邻外边距会合并
- 行内元素实际上不占上下外边距。行内元素的左右外边距不合并
- 浮动元素的外边距也不会合并
- 允许指定负的外边距值，不过使用时要小心
border边框
border属性设置一个元素的边框，它有三个要素：宽、样式、颜色，统称“边框三要素”。
三要素书写的时候一般如下顺序
border：宽度 样式 颜色
border：1px solid red;
不过不按此顺序来写依然能正常显示。
div{border：red soild 2px}
border-style设置边框的样式，有五种常用样式可选：
点状dotted
实线soild
双线double（需要最起码设置为3要素，不然显示不下）
虚线dashed
无边框none
border的三要素可以统一写在“border”属性中，也可以单独设置。
统一的写法：border：1px solid red
单独设置的写法：
border-width：XXX；
border-style：XXX；
border-color：XXX；
要注意，在style属性为空的情况下，整个边框是不会出现的，这不论是统一写在border或是单独设置都是这样的。
不写width会有默认3像素的值
不写颜色会默认为黑色
内边距
- 内容区域和边框之间的空间
- 会扩大元素边框所占用的区域
- 语法：padding：value；
- 单边设置
- padding-top/right/bottom/left:value;
- value可取值为像素，百分比，但不能为负数
内边距的简写
- padding：value（四个方向相同）；
- padding：value（上下）value（左右）
- padding：value（上）value（左右）value（下）
- padding：value（上）value（右）value（下）value（左）
怪异盒模型：
盒子模型分两种，一种是符合W3C规范的标准例子模型，另一种是IE的盒子模型，IE的盒子模型也叫怪异盒子
可以看到IE盒子模型也包括margin、border、padding、content，不过，和标准盒子模型不同的是：IE盒子模型的宽，包含了border和pading。
标准盒模型：padding的宽高要记录在盒子模型的宽高之内，于此相同的是border也要记录在盒子模型的宽高之内，但是margin并不算在宽高之内，所以各位在书写宽高时要注意减掉内边距和边框
Box-sizing
box-sizing属性允许你以“W3C的盒模型”或“IE盒模型”来定义元素，以适应区域。换句话说，当前元素使用哪种盒模型，可以由box-sizing属性来指定
它有两个值
content-box（标准）
padding和border不被包含在width和height内，元素的实际大小为宽高+border+padding，此为标准模式下的盒模型
border-box（怪异）
padding和border被包含在定义的width和height中，元素实际的大小为你定义了多宽就是多宽。此属性为怪异模式下的盒模型
实例
注意事项：
- 对于网页进行分析，划分方块
- 选择器的优先级及精确定位需要设置样式的标签
- 浮动属性对于其他元素的影响
- 使用定位属性时，精确找到定位参考点
- 设计时先水平，在垂直
- 注释要先行
流程：
1.首先用div构建界面的整体布局（方块），分析好各个div中有多少个div
2.通过CSS修改样式，通过div标签
3.链接到图片和文字，整体优化
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
