1,浮动布局
float,设置元素使用浮动布局,浮动有左浮动和右浮动。元素在使用浮动后,会脱离原有的文档流,在浮动文档流中,块元素是横向排列。
注意:
在
最
后
一
个
浮
动
元
素
结
束
的
地
方
必
须
清
除
浮
动
。
\color{#FF3030}{在最后一个浮动元素结束的地方必须清除浮动。}
在最后一个浮动元素结束的地方必须清除浮动。方法:
- 1,在最后一个浮动元素后面添加一个空元素,并设置style属性
<div style='clear: both'></div>
- 2,浮动的元素,都会有一个共同的父元素,可以为这个父元素添加一个后缀(:after)伪元素 ,在后缀中清除浮动。
.clear-fix:after{
content: "";
display: block;
clear: both;
}
- 3,使用CSS的overflow属性
//给父元素设置了overflow样式,不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了.
2,弹性布局
开启弹性布局。
div{
display:flex;
}
- 设置主轴的对其方式
flex-direction: row;
row默认的:主轴为水平方向,起点在左端
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿
- 设置项目(子元素)在容器(父元素)中主轴方向的占比。
flex-basis: 15%;值是百分比
- 更改项目在容器中的排列顺序,数字越大越靠后。
order: 3;值默认是0
- 项目在主轴的对齐方式(项目的排列方向)
justify-content:space-around;
flex-start(默认值):左对齐。
flex-end:右对齐。
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
- 项目在交叉轴的对齐方式
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度
- 当容器变大的时候,项目也会随之变大。默认值是0不参与分配。
flex-grow: 1;
- 当空间不够的情况压缩每个项目的比例
flex-shrink: 2;
- Flew-wrap:折行属性,规定项目如何换行。默认是不换。
flex-wrap: wrap;
flex总结
flex-direction:属性决定主轴的方向
flex-wrap:换行的方式
flex-flow:上述两种的简写
justify-content:项目在主轴上的对齐方式
align-items:交叉轴的对齐方式
align-content:属性定义了多根轴线的对齐方式。
如果项目只有一根轴线,该属性不起作用。
- 行内垂直居中
vertical-align: middle;
3,CSS 2D 转换
CSS 转换(transform属性)允许您移动、旋转、缩放和倾斜元素。
/*
transform:变形样式:
translate:移动
rotate:旋转
scale:缩放deg°
*/
transform: rotate(30deg);
设置变形的原点,默认是中心点50%,50%。
transform-origin: 100% 100%;
平移变形:两个参数分别代表横向偏移量和纵向偏移量
transform: translate(50px,30px);
缩放变形:两个参数分别代表横向缩放比和纵向缩放比
transform: scale(0.5,3.5);
4,CSS 3D 转换
transform属性,也可以使用以下3D 转换方法:
rotateX()
rotateY()
rotateZ()
perspective属性定义了3d元素距离视图的间距,单位是像素。
perspective: 1000px;
5,css动画
- Css过渡动画:transition;
- Css关键帧动画:animation:ani1 3s linear infinite;
6,长度单位
- px:像素,1px相当于屏幕上1个最小的显示单元。
- em:当前元素的父元素的字体大小。
- rem:根元素的字体大小。
- 1vw:浏览器窗口宽度的1%。
- 1vh:浏览器窗口高度的1%。
7,元素,文本阴影
- box-shadow:设置元素阴影,五个参数:
横向偏移量,
纵向偏移量,
模糊程度,
阴影大小,
阴影颜色。
box-shadow: 10px 10px 20px 0px grey;
- text-shadow:设置文本阴影,四个参数:
横向偏移量,
纵向偏移量,
模糊程度,
阴影大小,
text-shadow: 2px 2px 5px black;
8,表单元素
input:输入框,行内块元素。placeholder:提示内容。
<input type="text" placeholder="请输入账号">
button:按钮,行内块元素。
<button>按钮</button>
lable标签:用于关联一个其他的表单元素,for属性需要写关联元素的id,点击lable相当于点击了关联的元素。
<label for="psw">密码:</label>
radio:单选框,处在同一组的单选框只能选一个值。
<input type="radio" name="city">
<label for="">上海</label>
<input type="radio" name="city">
<label for="">深圳</label>
<input type="radio" name="city">
<label for="">北京</label>
<input type="radio" name="city">
chechbox:复选框,可以多选。
<label for="">白菜</label>
<input type="checkbox">
<label for="">苹果</label>
<input type="checkbox">
<label for="">西瓜</label>
<input type="checkbox">
select:下拉列表,行内块。
option:下拉列表项。
<select id="nvyou">
<!-- option 下拉列表项 -->
<option>小明</option>
<option>小红</option>
<option>小刚</option>
</select>
9,响应式布局
定义:页面本身能够根据浏览器窗口的宽度进行不同的布局。
viewport:视口设置。
@media:媒体查询,设置一些样式在某些条件下生效。媒体查询是响应式布局的基础。
@font-face,引入一个外部的字体文件,其中至少需要写src和font-family,src表示引入的文件的路径,font-family为这个字体定义一个名字。
@font-face{
src: url(cjs.ttf);
font-family: srpz;
}