CSS/CSS3 布局

最新推荐文章于 2022-04-18 22:17:34 发布

Rocke369

最新推荐文章于 2022-04-18 22:17:34 发布

阅读量251

点赞数

分类专栏：参考文档

本文链接：https://blog.csdn.net/qq_39314291/article/details/82229811

版权

参考文档专栏收录该内容

8 篇文章 0 订阅

订阅专栏

定位属性居中

水平垂直居中
/* 居中元素Add CSS*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*居中元素根据内容给出宽度，也就是说可以居中包裹的子元素，但子元素宽度如果宽度超出550px将自动换行。*/

方式2：
/* 居中元素Add CSS*/
width: 600px;
height: 600px;
position: absolute;
top: 1px;
bottom: 1px;
left: 1px;
right: 1px;
margin: auto;

方式3：
/* 父元素Add CSS*/
width: 600px;
height: 600px;
display:flex;
/* 居中Add CSS*/
margin:auto;
/* 居中元素根据内容给出宽度，也就是说可以居中包裹的子元素，但子元素宽度超过祖先元素宽度将自动换行。*/

水平居中
方式1：
/* 居中Add CSS*/
width: 600px;
height: 600px;
margin:0 auto;

方式2：
/* 父元素Add CSS*/
width: 600px;
height: 600px;
position:relative;
left:50%;
/* 居中元素Add CSS*/
width: 600px;
height: 600px;
position:relative;
right:50%;

水平居中内联元素
父元素Add CSS
width: 600px;
text-align: center;
垂直居中内联元素
父元素Add CSS
height: 500px;
line-height: 500px;

定位的元素控制层叠顺序
position:abstract;
z-index:-1;

清除浮动的影响
1 父元素添加样式
overflow:hidden
2 父元素添加样式
overflow:auto
3 浮动元素后加空标签，并设置样式
clear:both
4 父元素设置宽高
5 父元素添加样式
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}

让文字消失
父元素Add CSS
display: block;
text-indent: -999em;

图片处理
图片等比缩放
img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}

图片大于父元素居中
pa{text-aline:center;}
son{margin:0 -100%}
!important 增加样式权重语法：
样式名：值 !importan;

图片元素在相对于内联元素垂直居中
vertical-align: middle;

屏幕惯性滚动

-webkit-overflow-scrolling:touch

网站前端三剑客之一CSS，网页表示层。

参考属性

尺寸
width 设置元素的宽度。
height 设置元素高度。
max-width 设置元素的最大宽度。
min-width 设置元素的最小宽度。

border 边框
border: 1px solid red; 设置四条边框的线宽、样式、颜色
border-top: 1px solid blue; 设置上边框的线宽、样式、颜色

background 背景
background-color: red; 设置背景的颜色;
background-image: url("images/background01.jpg"); 设置背景图像
background-position: center; 规定背景图像的位置。
background-size: 100%; 设置背景图像的大小。
background-repeat:noset; 设置背景图像重复规则。
background-origin: border-box; 设置背景图像在边框或在内容中显示。
background-clip:padding-box 设置背景在内边距或在内容中显示。
background-attachment:fixed; 设置背景图像是否固定或者随着页面的其余部分滚动。

display 元素显示类型
display:inline-block 内联块元素
① 元素并在一行 ② 支持全部样式
③ 宽高由内容决定 ④ 元素换行会产生间距

position 定位类型
position:relative; 相对定位以自身元素进行定位，占据偏移前的位置
position:absolute; 绝对定位以有定位属性的父级元素边界进行定位，直到body，不占位置
position:fixed; 绑定定位以浏览器窗口进行定位，不占位置
top/right/buttom/left 与定位元素一同使用

float 浮动
float:left 左浮动
①浮动元素自动转换成内联块元素 ②浮动元素脱离标准流
③浮动元素停靠在父元素边界、其他浮动元素、未浮动元素

overflow 内容溢出
overflow:hidden; 隐藏溢出内容
vertical-align 垂直对齐
visibility 可见
z-index 堆叠顺序

边距
padding 内边距
padding: 5px; 设置四个方向的内边距

margin 外边距
margin: 5px; 设置四个方向的外边距

文本
text-align 文本对齐
text-align: center; 文本水平居中
line-height 行高
line-height:自身高度; 文本垂直居中
color 文本颜色

font 字体
font-family 设置字族
font-amily:"Microsoft yahei","宋体"; 设置第一、第二字体
font-size
font-size:14px; 14px大小的字体

outline 轮廓

transition 过渡
transition-property 需要过渡的属性名
transition-duration 持续时间
transition-timing-function 时间曲线
transition-delay 延时过渡

2D转换

transform

transform-origin 更改转换元素的位置
rotate(angle) 旋转角度
translate() 根据左和顶部位置给定的参数，从当前元素位置移动。
scale() 该元素增加或减少的大小（宽高）

动画

@keyframes 创建动画

animation 绑定动画