入门 |CSS布局样式
flex伸缩布局
常用步骤
1、父元素添加伸缩布局
display:flex
2、子元素分配数，均分
flex:1
父级属性
- min-width 最小值，达最小值时，不会随着窗口伸缩
- max-width 最大值
- flex-direction 布局方向row|column
display
block
//常见标签
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
//特点
- 从新行开始
- 高度、行高、外边距、内边距可以控制
- 宽度默认是容器的100%
- 可以容纳内联元素和其他块元素
inlne
//常见标签
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
//特点
- 仅靠自身字体大小和图像尺寸支撑
- 一般不可以设置宽度、高度、对齐等属性
- 常用于控制页面内文本的样式
inline-block
//常见标签
<img/>、<input>、<td>
//特点
- 和相邻行内块在一行上，之间会有**空白缝隙**
- 默认宽度是本身内容宽度
- 高度、行高、外边距、内边距可以控制
元素的显示与隐藏
display
//隐藏之后，不再保留位置
display:none
display:block
visibility
//隐藏之后继续保留位置
visibility:visible
visibility:hidden
overflow
//管理溢出部分
overflow:visible //默认
overflow:auto //超出的时候显示滚动条
overflow:hidden //溢出隐藏
overflow:scroll //无论如何显示滚动条
溢出文字隐藏
white-space
white-space:normal //默认
white-space:nowrap //强制在同一行显示所有文本 直到文本结束或者br标签
text-overflow
text-overflow:clip //不显示省略标记
text-overflow:ellipsis //显示省略号
Float
标准流
一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列
浮动
即让一个盒子浮在上方不受标准流制约
- 实现文字环绕
- 让div盒子一行内显示，并且会随着宽度变化而改变位置
- 浮动不会越过父元素的padding值
- 给加了浮动的div加上父元素，则想要定义在下面的浮动就不会跑上来；父元素内的盒子想要在一行，这都需要浮动，也可以直接在父元素上加
- 浮动不会影响上面已经形成的标准流，只会影响下方
- 优点：没有间隙
- 默认让元素转变为行内块
属性
Float:left|right
清除浮动
清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。
clear:left|right|both
下面是一些清除浮动的方法
额外标签
通过在浮动元素末尾添加一个空的标签
<div style="clear:both"></div>
父级添加overflow
overflow:hidden|auto|scroll
after伪类
空元素的升级版，好处是不用单独加标签了
.clearfix:after{centent:'';display:block;height:0;clear:both;visibilite:hidden}//正常浏览器
.clearfix{*zoom:1}//ie6\7
befor和after伪类
.clearfix:before,.clearfix:after{
content:'';
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
Positon
边偏移
- top 顶端偏移量，定义元素相对于其父元素上边线的距离
- bottom 底部偏移量，定义元素相对于其父元素下边线的距离
- left 左侧偏移量，定义元素相对于其父元素左边线的距离
- right 右侧偏移量，定义元素相对于其父元素右边线的距离
定位模式
-
static
含义：默认定位方式
作用：取消定位 -
reletive
含义：以自己的左上角为基点定位
注意：可与偏移位置，但原来的位置继续占有 -
absolute
含义：相对于 static 定位以外的第一个父元素进行定位
情况：父级没有定位，相对于浏览器定位；父级有定位，相对于最近的父元素定位 -
fixed
含义：相对于浏览器窗口进行定位
注意：不占位置
应用
应用：子绝父相
父元素相对定位占位置，不会影响其他元素；子元素绝对定位不占位置，在父元素内不会影响其他子元素
应用：盒子居中
//水平居中
position:absolute;
left:50%;
margin-left:-（自身元素的一半宽度）
应用：定位模式转换
元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块模式，(与元素添加浮动一样的效果)
叠层次序
z-index:2
- 如果取值相同，则按照书写顺序，后来居上
- 只有相对定位、绝对定位、固定定位有这个属性。其余标准流，浮动、静态定位都没有
版心与布局
常见的有960px、980px、1000px、1200px
布局流程
- 确定版心（可视区域\安全宽度）
- 分析行模块与列模块
常见布局
- 一列固定宽度且居中
- 两列左窄右宽
- 通栏平均分布
盒子模型
css3盒模型
box-sizing:border-box，padding和border包含在宽度里面。box-sizing:content-box是css2盒子模型
Margin
可以是一个值 padding-bottom、padding-top、padding-left、padding-right；也可以是多个值
margin:5px 5px 5px 5px //上右下左
margin:10px 5px 10px //上(左右)下
margin 10% 10% //(上下)(左右)
Border
语法
border:5px solid red; //边框宽度，边框样式，边框颜色
border-width
border:5px 5px 5px 5px //上右下左
border:thin medium thick //上(左右)下
border 10px 10px //(上下)(左右)
border-style
border-style:none //无样式
border-style:solid|dashed|groove|ridge //实心|虚线|3d凹槽|3d垄状
border-color
border-color:#ffffff //十六进制
border-color:bule //颜色
border-color:rgb(255,0,255)
border-color:rgba(255, 0, 0,0.3)
border-radius
border-radius:2px 3px 4px 5px //四个值按顺时针顺序
border-radius:10px 10px //两个值对角线关系
border-radius:5px //四个角
border-top简写
border-top:5px solid red;
//同样的还有border-left、border-right、 border-bottom
Padding
可以是一个值 padding-bottom、padding-top、padding-left、padding-right；可以是多个值
margin:5px 5px 5px 5px //上右下左
margin:10px 5px 10px //上(左右)下
margin 10% 10% //(上下)(左右)
Content
content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
element:after{
content: "1";
}
Box-shadow
box-shadow: h-shadow v-shadow; //水平位置|垂直位置 //均为必需允许负值
box-shadow: h-shadow v-shadow blur spread color inset|outset;
//水平位置 垂直位置 模糊距离 阴影尺寸 颜色 外部阴影|内部阴影
一些问题
消除元素的默认内外边距
*{
padding:0;
margin:0;
}
盒子的宽与高
宽高属性只适用于块级元素，对行内元素无效
宽的问题
- 如果一个盒子没有给定宽，那么子元素将占满父元素的宽度；
- 如果子盒子没有给定宽度，设置padding不会撑开盒子
实现盒子居中
auto表示充分满，水平居中只需要保证左右都是auto，居中的前提是盒子有宽度
margin-left:auto;margin-right:automargin:0,automargin:auto
margin合并问题
- 相邻块元素：如果两者垂直异向设置了margin，这么这一块将会被合并，以值最大的展示
- 嵌套块元素：默认的子元素如果设置margin，那么会带着父元素一起；解决方法——为父元素指定一个border或加一个padding，但是这样会增大盒子；添加
overflow:hidden
盒子布局的稳定性
width>padding>margin
盒子撑开问题
父盒子元素下，子内容指定宽度下，如果添加border或padding或margin，宽度会被撑开，则盒子的宽度为：内容宽+border宽+padding宽+margin宽
定位问题
如果加了position或浮动，margin失效。例外请看position应用
