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;
}

html,css基础(2)~浮动布局，弹性布局，css2D,3D转换，css动画，长度单位相关推荐

HTML/CSS布局—Flex布局(弹性布局)
目的:能够使用Flex布局模型灵活.快速的开发网页 Flex布局/弹性布局: 是一种浏览器提倡的布局模型布局网页更简单.灵活避免浮动脱标的问题作用: 基于 Flex 精确灵活控制块级盒子的布局方 ...
六、CSS 速览 —— 平面转换、3D转换、动画
平面转换.3D转换.动画字体图标 iconfont 阿里图标库从图标库引用素材平面转换 transition: all 1s; 设置元素变换动画 transform: translate(px, ...
CSS中的EM属性-弹性布局
使用CSS也好久了,但一直都是在使用"px"来设置Web元素的相关属性,未敢使用"em".主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目 ...
自适应网页(响应式布局)+弹性布局
1.自适应网页 1.声明viewport元标签 <meta name="viewport" content="width=device-width,initial- ...
CSS基础知识---浮动，定位和盒模型
转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...
flex布局(弹性布局、伸缩布局)
flex是CSS3中的一种布局方式主要介绍下弹性布局的常用的一些属性当一个盒子设置为display:flex的时候,盒子会变为一个弹性盒子,盒子内部的子元素会默认沿着主轴方向排布,此时会引出主轴和 ...
css3中的2D和3D转换、动画效果以及布局
文章目录一.2D转换: 1. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移动.移动参照元素左上角原点 2. 2D缩放: 3. 2D旋转: 4. 2D翻 ...
html 3d转换动画,开源项目：CSS 3D转换和动画学习示例教程
下面介绍的开源项目,是CSS在动画/3D变换方面的一些应用,非常酷的效果,全部由CSS3来实现. 在这里JavaScript仅作为动画控制来使用,JS并不控制UI界面的具体呈现,切换动画.3D效果仅需 ...
html文件div盒子浮动,css基础03-盒模型、网站布局思想、浮动以及浮动带来的影响...
定义: 在CSS处理页面的时候,它认为每个元素都是包含在一个不可见的盒子里,盒子模型由内容区域.内容区域周围空间(内边距padding).内边距的外边缘(边框,border)和边框外面将元素与相邻元素 ...

html,css基础(2)~浮动布局，弹性布局，css2D,3D转换，css动画，长度单位

目录