学习总结——html5+css3

学习总结——html5+css3

一、关于定位

1. 使用margin实现水平居中

position：absolute；
right：0；
left：0；
margin：0 auto；

也可以实现垂直居中margin：auto 0；位于父元素正中心margin：auto；

2. 文字居中：

height: 100px;
line-height: 100px;
text-align: center;

.

3. 去除html空格：font-size：0；也可以设置float

对于img可以使用vertical-align：top；

4. 一般使用浮动进行大块布局，开启定位设置细节定位。

5. 弹性盒布局

弹性容器 	display：flex
设置主轴空白分布方式	justify-content
设置元素对齐方式	 align-items
设置辅轴空白分布方式 	align- content
弹性元素	flex：增长 缩减 基础；

6. 布局等式：left+margin-left+width+margin-right +right=视口的宽度

   浏览器会自动调整大小以确保等式成立，有默认值auto。

   margin-left设置成负值可以让元素左移

二、关于样式

1. display:
   block;给a设置成块元素，他会自动添加高度，默认是父元素的100%；常用这种方式实现超链接不止wenzi可以点击。

2. 隐藏元素的方式：

display：none；位置不保留

visibility:hidden;位置保留

 height：0 ;可以通过transition设置过渡效果

1. 伪元素：：before和：：after可以在元素前后添加元素，比如直线。

2. div做成三角形

div{

width: 0;

height: 0;

border: 8px solid transparent;

border-top: none;

border-bottom-color: #fff;

}

3. div做成圆形border-radius: 50%

4. 隐藏文字text-indent:-9999px;

5. box-sizing: border-box;将边框宽度算入到width、height中。

6. 边框线在border外围，突出作用 ,btn和input默认有一个边框

outline: none;

7. outline-offset对轮廓进行偏移

8. 对于脱离文档流的元素可以是使用z-index设置层级关系，可以为负值。

9. 修改rotate旋转的圆点transform-origin: left center;

10. 开启3d变换transform-style: preserve-3d;

11. 设置人眼到舞台的距离才可以显示z轴变化perspective: 800px;

总体定位，之后修改细节，注意选择器优先级问题可能会造成设置的样式没有效果。