CSS3

最新推荐文章于 2022-03-10 07:55:02 发布
最新推荐文章于 2022-03-10 07:55:02 发布
阅读量223 收藏
点赞数
文章标签： 定位 relativelayout powerdesigner css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45027950/article/details/108863857
版权

引入样式的方式

行内样式

<div style="color:red;">...</div>

内部样式

<style>
    *{
     	color:red;   
    }
</style>

引入外部样式

<link rel="stylesheet" href="style.css">

导入外部样式

<style>
    @import './style.css';
</style>

选择器

基础选择器

全部选择器

选择所有元素

*{...}

标签选择器

选择指定的所有标签元素

div{...}

类选择器

选择包含 class 属性值的所有元素

.class{...}

ID选择器

选择包含 id 属性值的所有选择器

id 的值在同一个网页中应该是唯一的

#id{...}

复合选择器

交集选择器

同时满足两个以上条件的选择器

指定某个元素，并且包含某个样式类

<body>
    <style>
        p.red{color:red;}
    </style>
    <p class='red'>...</p>
</body>

同时包含两个样式类，样式类中间不能有空格

<body>
    <style>
        .red.bold{color:red;}
    </style>
    <p class='red bold'>...</p>
</body>

指定某个元素，并且为指定的ID

<body>
    <style>
        div#out{color:red;}
    </style>
    <div id='out'>...</div>
</body>

并集选择器

多个元素设置相同的样式

<body>
    <style>
        h1,h2{color:red;}
    </style>
    <h1>...</h1>
    <h2>...</h2>
</body>

后代选择器

选择所有的子元素，包含孙子级

<body>
    <style>
        ul li{color:red;}
    </style>
    <ul>
        <li>...</li> <!-- 可以选中 -->
        <ol>
            <li>...</li> <!-- 可以选中 -->
        </ol>
    </ul>
</body>

父子选择器

选择所有直接子元素，不包含孙子级

<body>
    <style>
        ul>li{color:red;}
    </style>
    <ul>
        <li>...</li> <!-- 可以选中 -->
        <ol>
            <li>...</li> <!-- 不能选中 -->
        </ol>
    </ul>
</body>

相邻兄弟选择器

选择后面紧邻的兄弟元素

<body>
    <style>
        dt+dd{color:red;}
    </style>
    <dl>
        <dd>...</dd> <!-- 不能选中 -->
        <dt>...</dt>
        <dd>...</dd> <!-- 可以选中 -->
        <dd>...</dd> <!-- 不能选中 -->
    </dl>
</body>

兄弟选择器

选择所有后面的兄弟元素

<body>
    <style>
        dt~dd{color:red;}
    </style>
    <dl>
        <dd>...</dd> <!-- 不能选中 -->
        <dt>...</dt>
        <dd>...</dd> <!-- 可以选中 -->
        <dd>...</dd> <!-- 可以选中 -->
    </dl>
</body>

属性选择器

包含属性

选择所有包含指定属性的元素

<body>
    <style>
        [name]{color:red;}
    </style>
    <input name="" />
</body>

包含属性且值为固定值

选择所有包含指定属性，且属性值等于指定值的元素

<body>
    <style>
        [type='text']{color:red;}
    </style>
    <input type='text' />
</body>

包含属性且值以指定字符串开头

选择所有包含指定属性，且属性值以指定字符串开头的元素

<body>
    <style>
        [href^='#']{color:red;}
    </style>
    <a href='#css指南'>...</a>
</body>

包含属性且值包含指定的字符串 选择所有包含指定属性，且属性值包含指定的字符串的元素

<body>
    <style>
        [href*='#']{color:red;}
    </style>
    <a href='css.html#css指南'>...</a>
</body>

包含属性且值以指定字符串结尾 选择所有包含指定属性，且属性值以指定字符串结尾的元素

<body>
    <style>
        [href$='.com']{color:red;}
    </style>
    <a href="mailto:123456@mail.com">...</a>
</body>

伪类选择器

**用于超链接

选择所有未被访问的链接

a:link{color:red;}

选择所有已被访问的链接

a:visited{color:red;}

选择活动的链接，鼠标按下但未释放

a:active{color:red;}

鼠标悬浮

鼠标悬浮在元素上方时

:hover{color:red;}

插入文本元素

在元素内容前插入文本元素

<body>
    <style>
        p:before { content: 'Hello,';  }
    </style>
    <p>HTML!</p>
</body>

在元素内容后插入内容

<body>
    <style>
        p:after { content: ',HTML!';  }
    </style>
    <p>Hello</p>
</body>

用于表单元素

获取焦点

<body>
    <style>
        :focus{outline-color: red;}
    </style>
    <form>
        <input type="text"/>
        <input type="text"/>
        <input type="text"/>
    </form>
</body>

启用的元素

<body>
    <style>
        :enabled{border-color: red;}
    </style>
    <form>
        <input type="text" disabled/>
        <input type="text"/>
        <input type="text" disabled/>
    </form>
</body>

禁用的元素

<body>
    <style>
        :disabled{border-color: red;}
    </style>
    <form>
        <input type="text" disabled/>
        <input type="text"/>
        <input type="text" disabled/>
    </form>
</body>

选中的元素，只作用于复选框和单选框

<body>
    <style>
        :checked{margin-right:20px;}
    </style>
    <form>
        <input type="radio" checked/> 男
        <input type="radio"/> 女
		<br/>
        <input type="checkbox" checked/> JAVA
        <input type="checkbox"/> HTML
    </form>
</body>

不包含指定条件

<body>
    <style>
        :not(:checked){margin-right:20px;}
    </style>
    <form>
        <input type="radio" checked/> 男
        <input type="radio"/> 女
		<br/>
        <input type="checkbox" checked/> JAVA
        <input type="checkbox"/> HTML
    </form>
</body>

子元素

根据位置，选择第一个子元素

<body>
    <style>
        dl :first-child{color:red;}
    </style>
    <dl>
        <dt>键盘</dt><!-- 可以选中 -->
        <dd>用户输入的工具</dd>
        <dt>显示器</dt>
        <dd>显示用户输入的工具</dd>
    </dl>
</body>

<body>
    <style>
        dl dd:first-child{color:red;}
    </style>
    <dl>
        <dt>键盘</dt><!-- 不能选中，不是 dd 元素 -->
        <dd>用户输入的工具</dd><!-- 不能选中，不是 dl 下的第一个子元素 -->
        <dt>显示器</dt>
        <dd>显示用户输入的工具</dd>
    </dl>
</body>

根据位置，选择最后一个子元素

<body>
    <style>
        dl :last-child{color:red;}
    </style>
    <dl>
        <dt>键盘</dt>
        <dd>用户输入的工具</dd>
        <dt>显示器</dt>
        <dd>显示用户输入的工具</dd><!-- 可以选中 -->
    </dl>
</body>

<body>
    <style>
        dl dt:last-child{color:red;}
    </style>
    <dl>
        <dt>键盘</dt>
        <dd>用户输入的工具</dd>
        <dt>显示器</dt> <!-- 不能选中，不是 dl 下的最后一个子元素 -->
        <dd>显示用户输入的工具</dd><!-- 不能选中，不是 dt 元素 -->
    </dl>
</body>

根据类型，选择第一个子元素

<body>
    <style>
        dl :first-of-type{color:red;}
    </style>
    <dl>
        <dt>键盘</dt><!-- 可以选中，dl 下第一个 dt 元素 -->
        <dd>用户输入的工具</dd><!-- 可以选中，dl 下第一个 dd 元素 -->
        <dt>显示器</dt>
        <dd>显示用户输入的工具</dd>
    </dl>
</body>

<body>
    <style>
        dl dd:first-of-type{color:red;}
    </style>
    <dl>
        <dt>键盘</dt> <!-- 不能选中，因为该元素不是 dd 元素 -->
        <dd>用户输入的工具</dd> <!-- 可以选中，dl 下的第一个 dd 元素 -->
        <dt>显示器</dt>
        <dd>显示用户输入的工具</dd>
    </dl>
</body>

根据类型，选择最后一个元素

<body>
    <style>
        dl :last-of-type{color:red;}
    </style>
    <dl>
        <dt>键盘</dt>
        <dd>用户输入的工具</dd>
        <dt>显示器</dt><!-- 可以选中，dl 下最后一个 dt 元素 -->
        <dd>显示用户输入的工具</dd><!-- 可以选中，dl 下最后一个 dd 元素 -->
    </dl>
</body>

<body>
    <style>
        dl dt:last-of-type{color:red;}
    </style>
    <dl>
        <dt>键盘</dt>
        <dd>用户输入的工具</dd>
        <dt>显示器</dt><!-- 可以选中，dl 下最后一个 dt 元素 -->
        <dd>显示用户输入的工具</dd><!-- 不能选中，因为该元素不是 dt 元素 -->
    </dl>
</body>

根据数量，选择唯一的子元素

<body>
    <style>
        dl :only-child{color:red;}
    </style>
    <dl>
        <dt>键盘</dt><!-- 可以选中，dl 中唯一的元素 -->
    </dl>
</body>

<body>
    <style>
        dl dt:only-child{color:red;}
    </style>
    <dl>
        <dt>键盘</dt><!-- 不能选中，不是 dl 中的唯一元素 -->
        <dd>用户输入的工具</dd>
    </dl>
</body>

根据类型，选择唯一的子元素

<body>
    <style>
        dl :only-of-type{color:red;}
    </style>
    <dl>
        <dt>键盘</dt><!-- 可以选中，dl 中唯一的 dt 元素 -->
        <dd>用户输入的工具</dd><!-- 不能选中，dl 中有多个 dd 元素 -->
        <dd>可以输入任何文字</dd><!-- 不能选中，dl 中有多个 dd 元素 -->
    </dl>
</body>

根据位置，选择指定位置的元素

<body>
    <style>
        dl :nth-child(2){color:red;}
    </style>
    <dl>
        <dt>键盘</dt>
        <dd>用户输入的工具</dd><!-- 可以选中，dl 中位置为 2 的子元素 -->
        <dt>显示器</dt>
        <dd>显示用户输入的工具</dd>
    </dl>
</body>

<body>
    <style>
        dl dt:nth-child(2){color:red;}
    </style>
    <dl>
        <dt>键盘</dt>
        <dd>用户输入的工具</dd><!-- 不能选中，不是 dt 元素 -->
        <dt>显示器</dt>
        <dd>显示用户输入的工具</dd><!-- 不能选中，不是 dl 中位置为 2 的子元素 -->
    </dl>
</body>

<body>
    <style>
        dl :nth-child(odd){color:red;}
    </style>
    <dl>
        <dt>键盘</dt><!-- 可以选中，因为位置为奇数 -->
        <dd>用户输入的工具</dd>
        <dt>显示器</dt><!-- 可以选中，因为位置为奇数 -->
        <dd>显示用户输入的工具</dd>
    </dl>
</body>

<body>
    <style>
        dl :nth-child(even){color:red;}
    </style>
    <dl>
        <dt>键盘</dt>
        <dd>用户输入的工具</dd><!-- 可以选中，因为位置为偶数 -->
        <dt>显示器</dt>
        <dd>显示用户输入的工具</dd><!-- 可以选中，因为位置为偶数 -->
    </dl>
</body>

根据类型，选择指定位置的元素

<body>
    <style>
        dl :nth-of-type(2){color:red;}
    </style>
    <dl>
        <dt>键盘</dt>
        <dd>用户输入的工具</dd>
        <dt>显示器</dt><!-- 可以选中，因为是第2个dt -->
        <dd>显示用户输入的工具</dd><!-- 可以选中，因为是第2个dd -->
    </dl>
</body>

<body>
    <style>
        dl dt:nth-of-type(2){color:red;}
    </style>
    <dl>
        <dt>键盘</dt>
        <dd>用户输入的工具</dd>
        <dt>显示器</dt><!-- 可以选中，因为是第2个dt -->
        <dd>显示用户输入的工具</dd><!-- 不能选中，因为不是 dt 元素 -->
    </dl>
</body>

<body>
    <style>
        dl :nth-of-type(odd){color:red;}
    </style>
    <dl>
        <dt>键盘</dt><!-- 可以选中，因为是第1个dt，1为奇数 -->
        <dd>用户输入的工具</dd><!-- 可以选中，因为是第1个dd，1为奇数 -->
        <dt>显示器</dt>
        <dd>显示用户输入的工具</dd>
    </dl>
</body>

<body>
    <style>
        dl :nth-of-type(even){color:red;}
    </style>
    <dl>
        <dt>键盘</dt>
        <dd>用户输入的工具</dd>
        <dt>显示器</dt><!-- 可以选中，因为是第2个dt，2为偶数 -->
        <dd>显示用户输入的工具</dd><!-- 可以选中，因为是第2个dd,2为偶数 -->
    </dl>
</body>

根据位置，选择指定倒数位置的元素

<body>
    <style>
        dl :nth-last-child(2){color:red;}
    </style>
    <dl>
        <dt>键盘</dt>
        <dd>用户输入的工具</dd>
        <dt>显示器</dt><!-- 可以选中，倒数第2个元素 -->
        <dd>显示用户输入的工具</dd>
    </dl>
</body>

<body>
    <style>
        dl dd:nth-last-child(2){color:red;}
    </style>
    <dl>
        <dt>键盘</dt>
        <dd>用户输入的工具</dd>
        <dt>显示器</dt><!-- 不能选中，因为该元素不是 dd 元素 -->
        <dd>显示用户输入的工具</dd>
    </dl>
</body>

根据类型，选择指定倒数位置的元素

<body>
    <style>
        dl :nth-last-of-type(2){color:red;}
    </style>
    <dl>
        <dt>键盘</dt><!-- 可以选中 -->
        <dd>用户输入的工具</dd><!-- 可以选中 -->
        <dt>显示器</dt>
        <dd>显示用户输入的工具</dd>
    </dl>
</body>

<body>
    <style>
        dl dd:nth-last-of-type(2){color:red;}
    </style>
    <dl>
        <dt>键盘</dt><!-- 不能选中，因为该元素不是 dd 元素 -->
        <dd>用户输入的工具</dd><!-- 可以选中 -->
        <dt>显示器</dt>
        <dd>显示用户输入的工具</dd>
    </dl>
</body>

伪元素选择器

选择内容

选择首字母

<body>
    <style>
        p::first-letter { color:red; }
    </style>
    <p>Hello,HTML</p>
</body>

选择首行

<body>
    <style>
        p::first-line { color:red; }
    </style>
    <p>
        Hello,HTML!<br/>
        Hello,HTML!<br/>
        Hello,HTML!<br/>
    </p>
</body>

选择用户选取的部分

<body>
    <style>
        p::selection { color:red; }
    </style>
    <p>
        Hello,HTML!<br/>
        Hello,HTML!<br/>
        Hello,HTML!<br/>
    </p>
</body>

字符样式

颜色

颜色名称

<body>
    <style>
        span{color:red;}
    </style>
    <div>正常文本<span>比对文本</span>正常文本</div>
</body>

十六进制

头两位表示红色，中间两位表示绿色，最后两位表示蓝色，取值范围00~FF

span{color:#FF0000;}

span{color:#F00;}

rgb( r e d , red, red,green,$blue)

取值范围0~255

<body>
    <style>
        span{color:rgb(255, 0, 0);}
    </style>
    <div>正常文本<span>比对文本</span>正常文本</div>
</body>

rgba( r e d , red, red,green, b l u e , blue, blue,alpha)

最后一位为透明度，取值范围0~1

<body>
    <style>
        span{color:rgba(255, 0, 0,0.5);}
    </style>
    <div>正常文本<span>比对文本</span>正常文本</div>
</body>

大小

以 px 为单位

<body>
    <style>
        span{font-size:30px;}
    </style>
    <div>正常文本<span>比对文本</span>正常文本</div>
</body>

以 em 为单位

1em=父级字体尺寸

2em=2倍父级尺寸

span{font-size:2em;}

以 rem 为单位

如果没有为 html 设置字体大小，则使用浏览器默认的字体大小为基准，假设浏览器默认的字体大小为 16px，则1rem=16px

span{font-size:2rem;}

如果为 html 设置了字体大小，则以 html 的字体大小为基准，假设 html 的字体大小为 10px，则1rem=10px

<body>
    <style>
        html{font-size:10px}
        span{font-size:2rem;}
    </style>
    <div>正常文本<span>比对文本</span>正常文本</div>
</body>

字体

中文字体和英文字体名称中间有空格的字体需要用引号包裹

设置多个字体时，浏览器会从左至右依次检查哪个字体可用，当检测到可用字体时就直接使用该字体渲染，如果所有字体都不可用，则使用浏览器默认的字体

<body>
    <style>
        span{font-family: '华文黑体','华文行楷';}
    </style>
    <div>正常文本<span>对比文本</span>正常文本</div>
</body>

倾斜

可取值说明
normal默认值。标准的字体样式。
italic斜体的字体样式
oblique倾斜的字体样式
inherit从父元素继承
<body>
    <style>
        span{font-style:italic;}
    </style>
    <div>正常文本<span>比对文本</span>正常文本</div>
</body>

粗细

可取值说明
normal默认值。定义标准的字符。
bold定义粗体字符。
bolder定义更粗的字符。
lighter定义更细的字符。
100 ~ 900定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit从父元素继承
<body>
    <style>
        span{font-weight:bold;}
    </style>
    <div>正常文本<span>比对文本</span>正常文本</div>
</body>

字体样式缩写

font:倾斜 粗细 大小 字体

<body>
    <style>
        span{font: italic bold 30px '华文黑体','华文行楷';}
    </style>
    <div>正常文本<span>对比文本</span>正常文本</div>
</body>

修饰线

text-decoration:位置 风格 颜色;

位置说明
non没有修饰线
underline下划线
overline上划线
line-through贯穿线
inherit父级继承
风格颜色
solid单实线
double双实线
dotted点划线
dashed虚线
wavy波浪线
<body>
    <style>
        span{text-decoration:underline dashed red;}
    </style>
    <div>正常文本<span>比对文本</span>正常文本</div>
</body>

分开设置修饰线

<body>
    <style>
        span{
            text-decoration-line:underline;
            text-decoration-color:red;
            text-decoration-style: dashed;
        }
    </style>
    <div>正常文本<span>比对文本</span>正常文本</div>
</body>

没有修饰线

text-decoration:none;

间距

<body>
    <style>
        span{letter-spacing:10px;}
    </style>
    <div>正常文本<span>比对文本</span>正常文本</div>
</body>

阴影

text-shadow:X轴偏移量 Y轴偏移量 模糊圆角半径 阴影颜色;

<body>
    <style>
        span{text-shadow: 1px 1px 2px red;}
    </style>
    <div>正常文本<span>比对文本</span>正常文本</div>
</body>

大小写字母转换

可选值说明
capitalize每个单词的首字母转成大写，其他字母转成小写
uppercase所有字母转成大写形式
lowercase所有字母转成小写形式
none不进行转换
<body>
    <style>
        span{text-transform: capitalize;}
    </style>
    <div>Hello world <span>Hello world</span> Hello world</div>
</body>

行样式

行高

<body>
    <style>
        div:nth-of-type(2){line-height: 3em;}
    </style>
    <div>正常行正常行正常行<br/>正常行正常行正常行</div>
    <div>对比行对比行对比行<br/>对比行对比行对比行</div>
    <div>正常行正常行正常行<br/>正常行正常行正常行</div>
</body>

水平对齐方式

只能作用域块级元素，对行内元素无效

可选值说明
left水平居左
center水平居中
right水平居右
justify两端对齐，自动换行时有效
<body>
    <style>
        div{text-align: center;}
    </style>
    <div>center</div>
</body>

垂直对齐方式

仅对行内元素和单元格有效，或在图文混排时作用于图像上

可选值说明
baseline基线对齐，默认值
top顶部对齐
bottom底部对齐
middle居中对齐
10px基线上方 10px
<body>
    <style>
        span {
            display: table-cell;
            height: 50px;
            vertical-align: middle;
        }
    </style>
    <div>正常文本<span>比对文本</span>正常文本</div>
</body>

<body>
    <style>
        span {
            vertical-align: 10px;
        }
    </style>
    <div>正常文本<span>比对文本</span>正常文本</div>
</body>

首行缩进

只能作用于块级元素

<body>
    <style>
        div:nth-of-type(2){text-indent: 2em;}
    </style>
    <div>正常行正常行正常行<br/>正常行正常行正常行</div>
    <div>对比行对比行对比行<br/>对比行对比行对比行</div>
    <div>正常行正常行正常行<br/>正常行正常行正常行</div>
</body>

空白符处理

可选值说明
normal会合并多个空白符，换行符会被当做空白符
pre-line会合并多个空白符，保留换行符，会删除头尾空白符
pre-wrap不合并空白符，保留换行符，不会删除头尾空白符
<body>
    <style>
        div:nth-of-type(1){white-space: normal;}
        div:nth-of-type(2){white-space: pre-line;}
        div:nth-of-type(3){white-space: pre-wrap;}
    </style>
    <div>   normal    normal
        normal    </div>
    <div>   pre-line    pre-line
        pre-line    </div>
    <div>   pre-wrap    pre-wrap
        pre-wrap    </div>
</body>

单词间距

仅对英文有效

<body>
    <style>
        div{word-spacing: 10em;}
    </style>
    <div>Hello World!</div>
</body>

单词分割并换行规则

可选值说明
normal在正常的单词结束处换行
break-word如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行
<body>
    <style>
        div{width:10px;overflow-wrap: break-word;}
    </style>
    <div>Hello World! </div>
</body>

字体溢出处理

text-overflow 只在块级元素中生效，并且要为块级元素设置 white-space:nowrap和overflow:hidden

text-overflow说明
clip默认值，溢出部分直接隐藏
ellipsis使用 ‘…’ 来替换溢出部分
<body>
    <style>
        h1{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:300px;}
    </style>
    <h1>易非气快、一决，登有承生杨下斯召人年</h1>
</body>

透明度

取值范围为 0~1，0 为完全透明，1 为完全不透明

<body>
    <style>
        img{opacity: 0.5;}
    </style>
    <img src="https://www.yaconit.com/public/images/logo.png"/>
</body>

盒子模型

类型

有了整个样式属性后，我们就可以根据需要调整任意盒子的默认类型

可选值说明
block更改盒子的类型为块级盒子
inline更改盒子的类型为行内盒子
inline-block更改盒子的类型为行内块级盒子
table-cell更改盒子的类型为单元格
flex更改盒子的类型为伸缩容器
grid更改盒子的类型为网格容器
<body>
    <style>
        div {
            display: inline;
        }
    </style>
    <div>我是DIV</div>
    <div>我是DIV</div>
    <div>我是DIV</div>
</body>

<body>
    <style>
        span {
            display: block;
        }
    </style>
    <span>我是span</span>
    <span>我是span</span>
    <span>我是span</span>
</body>

尺寸

只能作用于块级盒子

设置盒子的尺寸

width 盒子的宽度

height 盒子的高度

<body>
    <style>
        div {
           width:100px;
           height: 300px;
           background-color: red;
        }
    </style>
    <div>100x300</div>
</body>

设置盒子的最小尺寸

当盒子的尺寸比最小尺寸小时，则最小尺寸生效

当盒子的尺寸比最小尺寸大时，则盒子的尺寸生效

<body>
    <style>
        div {
           width:50px;
           height: 150px;
           min-width: 100px;
           min-height: 300px;
           background-color: red;
        }
    </style>
    <div>100x300</div>
</body>

设置最大尺寸

当盒子的尺寸大于最大尺寸时，最大尺寸生效

当盒子的尺寸小于最大尺寸时，盒子的尺寸生效

<body>
    <style>
        div {
           width:100px;
           height: 300px;
           max-width: 50px;
           max-height: 150px;
           background-color: red;
        }
    </style>
    <div>50x150</div>
</body>

边距

外边距

元素边框以外的距离

设置四边外边距

<body>
    <style>
        div {
            width: 100px;
            height: 100px;
            border:1px solid red;
            margin:20px;
        }
    </style>
    <div></div>
    <div></div>
</body>

设置上下、左右外边距

margin:10px 20px;

设置上、左右、下外边距

margin:10px 20px 30px;

设置上、右、下、左外边距

margin:10px 20px 30px 40px;

设置上外边距

margin-top:10px;

设置右外边距

margin-right:10px;

设置下外边距

margin-bottom:10px;

设置左外边距

margin-left:10px;

内边距

元素边框与内容之间的距离

设置四边内边距

padding:10px;

设置上下、左右内边距

padding:10px 20px;

设置上、左右、下内边距

padding:10px 20px 30px;

设置上、右、下、左内边距

padding:10px 20px 30px 40px;

设置上内边距

padding-top:10px;

设置右内边距

padding-right:10px;

设置下内边距

padding-bottom:10px;

设置左内边距

padding-left:10px;

溢出

当盒子内容超出盒子范围时，需要对盒子进行溢出处理

可选值说明
visible默认值。内容不会被修剪，会呈现在元素框之外
hidden内容会被修剪，并且其余内容不可见
scroll内容会被修剪，浏览器会显示滚动条以便查看其余内容
auto由浏览器定夺，如果内容被修剪，就会显示滚动条
inherit继承父级
<body>
    <style>
        div {
            width: 300px;
            height: 300px;
            line-height:5em;
            overflow:auto;
        }
    </style>
    <div>
        Hello HTML<br/>Hello HTML<br/>
        Hello HTML<br/>Hello HTML<br/>
        Hello HTML<br/>Hello HTML<br/>
    </div>
</body>

边框

可以作用与所有盒子

缩写形式

同时设置四条边

border: 宽度 样式 颜色

样式说明
dotted圆点
dashed虚线
solid实线
double双实线
groove有雕刻效果的边框
ridge有浮雕效果的边框
inset有陷入效果的边框
outset有突出效果的边框
<body>
    <style>
        div {
           width:100px;
           height: 100px;
           border: 2px solid red;
        }
    </style>
    <div></div>
</body>

拆分形式

同时设置四条边

<body>
    <style>
        div {
           width:100px;
           height: 100px;
           border-width: 2px;
           border-style: solid;
           border-color: red;
        }
    </style>
    <div></div>
</body>

设置上下边框和左右边框

border-width:1px 2px;
border-sytle:solid dotted;
border-color:#F00 #00F;

设置上边框、左右边框和下边框

border-width:1px 2px 3px;
border-sytle:solid dotted dashed;
border-color:#F00 #00F #0FF;

设置上边框、右边框、下边框和左边框

border-width:1px 2px 3px 4px;
border-sytle:solid dotted dashed double;
border-color:#F00 #00F #0FF #000;

设置上边框

缩写形式

border-top:2px solid red;

拆分形式

border-top-width:1px;
border-top-style:solid;
border-top-color:red;

设置右边框

缩写形式

border-right:2px solid red;

拆分形式

border-right-width:1px;
border-right-style:solid;
border-right-color:red;

设置下边框

缩写形式

border-bottom:2px solid red;

拆分形式

border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:red;

设置左边框

缩写形式

border-left:2px solid red;

拆分形式

border-left-width:1px;
border-left-style:solid;
border-left-color:red;

轮廓

轮廓的用法和边框一样，请参考边框进行使用

轮廓不占用盒子空间，边框占用盒子空间，在左布局时，可以使用轮廓进行大框的查看与调试

<body>
    <style>
        div {
           width:100px;
           height: 100px;
           outline: 2px solid red;
        }
    </style>
    <div></div>
</body>

圆角

设置四个角

<body>
    <style>
        div {
           width:100px;
           height: 100px;
           border: 2px solid blue;
           box-radius: 10px;
        }
    </style>
    <div></div>
</body>

设置左上右下、 右上左下圆角

border-radius：10px 20px;

设置左上、右上左下、右下圆角

border-radius：10px 20px 30px;

设置左上、右上、右下、左下圆角

border-radius：10px 20px 30px 40px;

设置左上角

border-top-left-radius:10px;

设置右上角

border-top-right-radius:10px;

设置左下角

border-bottom-left-radius:10px;

设置右下角

border-bottom-right-radius:10px;

阴影

box-shadow: X轴偏移量 Y轴偏移量 阴影半径 模糊半径 阴影颜色;

<body>
    <style>
        div {
           width:100px;
           height: 100px;
           border: 2px solid blue;
           box-shadow: 1px 1px 2px 1px #F00;
        }
    </style>
    <div></div>
</body>

背景

缩写形式

background:背景颜色 图像 平铺方式 定位;

平铺方式说明
repeat沿X轴和Y轴平铺，图像大小不变，超出部分会被裁剪掉
round沿X轴和Y轴平铺，图像大小会调整到正好填充的大小
no-repeat不平铺
repeat-x沿X轴平铺，图像大小不变，超出部分会被裁剪掉
repeat-y沿Y轴平铺，图像大小不变，超出部分会被裁剪掉
定位说明
center水平方向和垂直方向都居中对齐
top水平方向居中对齐，垂直方向顶部对齐
bottom水平方向居中对齐，垂直方向底部对齐
left水平方向左侧对齐，垂直方向居中对齐
right水平方向右侧对齐，垂直方向居中对齐
left top水平方向左侧对齐，垂直方向顶部对齐
50px水平向左侧偏移 50px，垂直方向居中
-50px水平向右侧偏移 50px，垂直方向居中
10px 10px水平方向偏移 10px，垂直方向偏移 10px
<body>
    <style>
        div {
            width: 300px;
            height: 300px;
            background: red url(https://www.yaconit.com/public/images/logo.png) no-repeat left top;
        }
    </style>
    <div></div>
</body>

拆分形式

<body>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: red;
            background-image: url(https://www.yaconit.com/public/images/logo.png);
            background-repeat: no-repeat;
            background-position: left top;
        }
    </style>
    <div></div>
</body>

单独设置x轴定位

background-position-x: left;

单独设置y轴定位

background-position-y: top;

背景图像固定方式

需要配合 overflow:scroll或 overflow:auto使用

可选值说明
fixed背景固定，不会随着元素内容滚动而滚动
local背景不固定，会随着元素内容滚动而滚动
<body>
    <style>
        div {
            width: 300px;
            height: 300px;
            line-height:5em;
            overflow:scroll;
            background: red url(https://www.yaconit.com/public/images/logo.png) no-repeat left top;
            background-attachment: local;
        }
    </style>
    <div>
        Hello HTML<br/>Hello HTML<br/>
        Hello HTML<br/>Hello HTML<br/>
        Hello HTML<br/>Hello HTML<br/>
    </div>
</body>

背景图像裁剪方式

可选值说明
border-box背景延伸至边框外沿
padding-box背景延伸至内边距外沿
content-box背景被裁剪至内容区外沿
<body>
    <style>
        div {
            width: 100px;
            height: 100px;
            border:5px solid rgba(0,0,255,0.2);
            padding:10px;
            background: transparent url(https://www.yaconit.com/public/images/logo.png) no-repeat left top;
            background-clip: content-box;
        }
    </style>
    <div></div>
</body>

背景图像定位区域

可选值说明
border-box背景图像圆点为 border 的原点
padding-box背景图像圆点为 padding 的原点
content-box背景图像圆点为 content 的原点
<body>
    <style>
        div {
            width: 100px;
            height: 100px;
            border:5px solid rgba(0,0,255,0.2);
            padding:10px;
            background: transparent url(https://www.yaconit.com/public/images/logo.png) no-repeat left top;
            background-origin: content-box;
        }
    </style>
    <div></div>
</body>

背景图像尺寸

可选值说明
100px宽为 100px，高等比缩放
100px 100px宽为 100px，高为 100px
auto背景图片原有尺寸
cover缩放背景图片以完全覆盖背景区，超出部分裁剪，保证宽或高完全显示
contain缩放背景图片以完全装入背景区，背景区可能会有空白
<body>
    <style>
        div {
            width: 100px;
            height: 100px;
            border:5px solid rgba(0,0,255,0.2);
            padding:10px;
            background: transparent url(https://www.yaconit.com/public/images/logo.png) no-repeat left top;
            background-size: contain;
        }
    </style>
    <div></div>
</body>

列表

缩写形式

不一定全部属性都设置，可以只设置列表风格，也可以只设置标记图像或者设置其中的两个

list-style:列表风格 标记图像 标记定位;

list-style-type说明
disc实心圆点 (默认值)
circle空心圆点
square实心方块
decimal十进制阿拉伯数字，从1开始
decimal-leading-zero十进制阿拉伯数字，从01开始
lower-roman小写罗马数字，从i开始
upper-roman大写罗马数字，从I开始
lower-greek小写古希腊文，从α开始
lower-latin小写英文字母，从a开始
upper-latin大写英文字母，从A开始
list-style-position说明
outside标记盒在主块盒的外面
inside标记盒是主要块盒中的第一个行内盒，处于元素的内容流之后
<body>
    <style>
        ul {
            list-style: square url(https://www.yaconit.com/public/images/logo.png) inside;
        }
    </style>
    <ul>
        <li>list-item</li>
        <li>list-item</li>
        <li>list-item</li>
        <li>list-item</li>
    </ul>
</body>

清空列表所有样式

list-style:none;

单独设置

列表风格

list-style-type:square;

标记位置

list-style-position:inside;

标记图像

list-style-image:url(https://www.yaconit.com/public/images/logo.png);

表格

设置表格外边框样式

border样式可以作用在 table和td上，但对tr无效

<body>
    <style>
        table{
            border:1px solid red;
        }
    </style>
    <table>
        <tr>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
        </tr>
        <tr>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
        </tr>
    </table>
</body>

表格边框合并方式

border-collapse说明
separate不合并，默认值
collapse合并
<body>
    <style>
        table {
            border-collapse: collapse;
        }

        td {
            border: 1px solid red;
        }
    </style>
    <table>
        <tr>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
        </tr>
        <tr>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
        </tr>
    </table>
</body>

相邻单元格边框之间的距离

当设置了border-collapse: collapse;时无效

<body>
    <style>
        table {
            border-spacing: 10px;
        }

        td {
            border: 1px solid red;
        }
    </style>
    <table>
        <tr>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
        </tr>
        <tr>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
        </tr>
    </table>
</body>

单独设置水平和垂直间距

border-spacing:水平间距 垂直间距;

border-spacing:10px 20px;

规定表格标题的位置

只有设置了表格标题时才有效果

位置说明
top标题会出现在表格的上方
bottom标题会出现在表格的下方
<body>
    <style>
        table {
            caption-side: top;
        }

        td {
            border: 1px solid red;
        }
    </style>
    <table>
        <caption>Caption</caption>
        <tr>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
        </tr>
        <tr>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
        </tr>
    </table>
</body>

是否显示空单元格的边框和背景样式

可选值说明
show边框和背景正常渲染。与普通元素一样
hide边框和背景被隐藏
<body>
    <style>
        table {
            empty-cells:hide
        }

        td {
            border: 1px solid red;
        }
    </style>
    <table>
        <caption>Caption</caption>
        <tr>
            <td>cell</td>
            <td></td>
            <td>cell</td>
        </tr>
        <tr>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
        </tr>
    </table>
</body>

表格的布局算法

可选值说明
auto自动布局，表格及单元格的宽度取决于包含内容的宽度
fixed固定布局，表格和列的宽度通过表格的宽度来设置，某一列的宽度由首列的宽度决定
<body>
    <style>
        table {
            width: 300px;
            table-layout:fixed;
        }
        td {
            border: 1px solid red;
        }
    </style>
    <table>
        <tr>
            <td>橘子</td>
            <td>香蕉</td>
            <td>火龙果</td>
        </tr>
        <tr>
            <td>天山雪莲</td>
            <td>柚子</td>
            <td>梨</td>
        </tr>
    </table>
</body>

浮动

可以将元素放入浮动流，进入浮动流的元素均水平排列

如果子元素全都在浮动流，那么父级元素所在表中文档流中就没有子元素，所以就会出现塌陷，及高度为0

浮动方向说明
left左浮动
right右浮动
none不浮动
<body>
    <style>
        ul{
            background-color: red;
        }
        li {
            float: left;
            margin: 0 10px
        }
    </style>
    <ul>
        <li>list-item-1</li>
        <li>list-item-2</li>
        <li>list-item-3</li>
    </ul>
</body>

清除浮动

可选值说明
left左侧不允许有浮动元素
right右侧不允许有浮动元素
both两侧都不能有浮动元素
<body>
    <style>
        ul{
            background-color: red;
        }
        li{
            float: left;
            margin: 0 10px
        }
        .clear{
            float:none;
            clear: both;
        }
    </style>
    <ul>
        <li>list-item-1</li>
        <li>list-item-2</li>
        <li>list-item-3</li>
        <li class="clear"></li>
    </ul>
</body>

定位

可以是元素进入定位流，凡是进入定位流的元素，都可以通过 left、right、top和bottom来进行位置的调控

凡是在定位流的元素，都要先去弄清它的原点位置

定位类型

类型说明
relative相对定位，原点位置为自身原点位置
absolute绝对定位，原点位置为最近一个在定位流的父级元素的原点位置，如果没有在定位流的父级元素，则为body元素的原点位置
fixed固定定位，原点位置为body元素的原点位置
sticky粘性定位，原点位置默认为自身原点位置，当页面向上滚动时，会黏贴在页面顶部，具顶部的位置由top决定
static没有定位
<body>
    <style>
        body {
            margin: 10px
        }

        ul {
            background-color: red;
            position: sticky;
            top: 0;
        }
    </style>
    <table height="500"></table>
    <ul>
        <li>list-item-1</li>
        <li>list-item-2</li>
        <li>list-item-3</li>
    </ul>
    <table height="500"></table>
</body>

定位偏移量设置

相对于原点位置的偏移

元素顶部距离上方的偏移量

top:10px;

元素的底部距离下方的偏移量

bottom:10px;

元素右侧距离右方的偏移量

right:10px;

元素左侧距离左方的偏移量

left:10px;

堆叠顺序

只有在定位流，元素才可以堆叠在一起

当索引值一致时，后面的元素会覆盖前面的元素

索引值越大，元素就越靠前

<body>
    <style>
        li {
            height: 100px;
            width: 100px;
            list-style: none;
            position: absolute;
        }

        li:nth-of-type(1) {
            background-color: rgba(255, 0, 0, 0.7);
            top:10px;
            left:10px
        }

        li:nth-of-type(2) {
            background-color: rgba(0, 255, 0, 0.7);
            top:20px;
            left:20px;
            z-index: 1;
        }

        li:nth-of-type(3) {
            background-color: rgba(0, 0, 255, 0.7);
            top:30px;
            left:30px;
        }
    </style>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

伸缩容器

伸缩容器也称为弹性盒子，他是一种一维的布局方式，根据主轴和辅助轴的方向，对弹性项进行排列布局

在伸缩容器中的直接子元素被称为弹性项

创建伸缩容器

默认的主轴方向为水平方向

<body>
    <style>
        .wrapper{width: 300px;height: 300px;background-color: #ddd;}
        .wrapper>div{text-align: center;padding:5px}
        .wrapper>div:nth-child(even){background-color: #f0f;}
        .wrapper>div:nth-child(odd){background-color: #0ff;}
        .wrapper {
            display: flex;
        }
    </style>
    <div class="wrapper">
        <div>one</div>
        <div>two</div>
        <div>three</div>
        <div>four</div>
    </div>
</body>

调整主轴方向

flex-direction说明
row主轴为水平轴，方向为从左至右
row-reverse主轴为水平轴，方向为从右至左
column主轴为垂直轴，方向为从上至下
column-reverse主轴为垂直轴，方向为从下至上
<body>
    <style>
        .wrapper{width: 300px;height: 300px;background-color: #ddd;}
        .wrapper>div{text-align: center;padding:5px}
        .wrapper>div:nth-child(even){background-color: #f0f;}
        .wrapper>div:nth-child(odd){background-color: #0ff;}
        .wrapper {
            display: flex;
            flex-direction: column;
        }
    </style>
    <div class="wrapper">
        <div>one</div>
        <div>two</div>
        <div>three</div>
        <div>four</div>
    </div>
</body>

弹性项在主轴的排列

justify-content说明
flex-start从主轴的开始位置排列
flex-end从主轴的结束位置排列
center从主轴的中间位置向两边排列
space-between在主轴方向上两端对齐
space-around在主轴方向上环绕对齐，第一个元素与最后一个元素距主轴的开始位置和结束位置的距离为子元素间距的一半
space-evenly在主轴方向上环绕对齐，第一个元素与最后一个元素距主轴的开始位置和结束位置的距离等于子元素间距
<body>
    <style>
        .wrapper{width: 300px;height: 300px;background-color: #ddd;}
        .wrapper>div{text-align: center;padding:5px}
        .wrapper>div:nth-child(even){background-color: #f0f;}
        .wrapper>div:nth-child(odd){background-color: #0ff;}
        .wrapper {
            display: flex;
            justify-content: space-around;
        }
    </style>
    <div class="wrapper">
        <div>one</div>
        <div>two</div>
        <div>three</div>
        <div>four</div>
    </div>
</body>

弹性项在侧轴的排列

统一设置

align-items说明
flex-start从侧轴的开始位置排列
flex-end从侧轴的结束位置排列
center从侧轴的中心位置向两端排列
stretch在侧轴方向上填充容器，默认值
<body>
    <style>
        .wrapper{width: 300px;height: 300px;background-color: #ddd;}
        .wrapper>div{text-align: center;padding:5px}
        .wrapper>div:nth-child(even){background-color: #f0f;}
        .wrapper>div:nth-child(odd){background-color: #0ff;}
        .wrapper {
            display: flex;
            align-items: center;
        }
    </style>
    <div class="wrapper">
        <div>one</div>
        <div>two</div>
        <div>three</div>
        <div>four</div>
    </div>
</body>

单独设置

align-self的值和align-items一致

<body>
    <style>
        .wrapper{width: 300px;height: 300px;background-color: #ddd;}
        .wrapper>div{text-align: center;padding:5px}
        .wrapper>div:nth-child(even){background-color: #f0f;}
        .wrapper>div:nth-child(odd){background-color: #0ff;}
        .wrapper {display: flex;}
        .box1{align-self: center;}
    </style>
    <div class="wrapper">
        <div class="box1">one</div>
        <div>two</div>
        <div>three</div>
        <div>four</div>
    </div>
</body>

弹性项的溢出处理

flex-wrap说明
nowrap不换行，可能会溢出容器
wrap自动向下换行
wrap-reverse自动向上换行
<body>
    <style>
        .wrapper{width: 300px;height: 300px;background-color: #ddd;}
        .wrapper>div{text-align: center;padding:5px}
        .wrapper>div:nth-child(even){background-color: #f0f;}
        .wrapper>div:nth-child(odd){background-color: #0ff;}
        .wrapper {
            display: flex;
            flex-wrap: wrap;
        }
    </style>
    <div class="wrapper">
        <div>one</div>
        <div>two</div>
        <div>three</div>
        <div>four</div>
        <div>five</div>
        <div>six</div>
        <div>eight</div>
        <div>nine</div>
        <div>ten</div>
    </div>
</body>

弹性项的间距

gap说明
50px行、列间距均为50px
50px 10px行间距50px，列间距10px
<body>
    <style>
        .wrapper{width: 300px;height: 300px;background-color: #ddd;}
        .wrapper>div{text-align: center;padding:5px}
        .wrapper>div:nth-child(even){background-color: #f0f;}
        .wrapper>div:nth-child(odd){background-color: #0ff;}
        .wrapper {
            display: flex;
            flex-wrap: wrap;
            gap:50px 10px;
        }
    </style>
    <div class="wrapper">
        <div>one</div>
        <div>two</div>
        <div>three</div>
        <div>four</div>
        <div>five</div>
        <div>six</div>
        <div>eight</div>
        <div>nine</div>
        <div>ten</div>
    </div>
</body>

弹性项伸缩

当所有弹性项的增长系数一致时，就会平分容器的空间

<body>
    <style>
        .wrapper{width: 300px;height: 300px;background-color: #ddd;}
        .wrapper>div{text-align: center;padding:5px}
        .wrapper>div:nth-child(even){background-color: #f0f;}
        .wrapper>div:nth-child(odd){background-color: #0ff;}
        .wrapper {display: flex;}
        .box1{flex:1;}
        .box2{flex:1;}
        .box3{flex:1;}
        .box4{flex:1;}
    </style>
    <div class="wrapper">
        <div class="box1">one</div>
        <div class="box2">two</div>
        <div class="box3">three</div>
        <div class="box4">four</div>
    </div>
</body>

弹性项的初始宽度

.box1{min-width:200px;}

弹性项的排序

序号越小越靠近主轴开始位置，序号越大越靠近主轴结束位置

.box1{order:1;}

网格容器

网格容器以二维的方式对网格进行排版布局

网格容器内的元素称为网格元素

每一个网格元素都是由轨道创建出来的，轨道可以规定网格元素的数量和尺寸

轨道分为行轨道和列轨道

创建网格容器

<body>
    <style>
        .wrapper{width: 300px;height: 300px;background-color: #ddd;}
        .wrapper>div{text-align: center;padding:5px}
        .wrapper>div:nth-child(even){background-color: #f0f;}
        .wrapper>div:nth-child(odd){background-color: #0ff;}
        .wrapper {display: grid;}
    </style>
    <div class="wrapper">
        <div>one</div>
        <div>two</div>
        <div>three</div>
        <div>four</div>
        <div>five</div>
    </div>
</body>

创建显式列轨道

grid-template-columns规定了列轨道的模板，每个值都表示了网格元素的宽度，设置了几个值，在列轨道上就有几个网格元素

1fr表示当前网格元素占1份宽度，总宽度有容器宽度决定，总份数为所有网格元素所占的份数和

<body>
    <style>
        .wrapper{width: 300px;height: 300px;background-color: #ddd;}
        .wrapper>div{text-align: center;padding:5px}
        .wrapper>div:nth-child(even){background-color: #f0f;}
        .wrapper>div:nth-child(odd){background-color: #0ff;}
        .wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }
    </style>
    <div class="wrapper">
        <div>one</div>
        <div>two</div>
        <div>three</div>
    </div>
</body>

网格元素的宽度可以使用像素值

grid-template-columns: 50px 80px 60px;

可以让某个网格的宽度自适应

grid-template-columns: 50px auto 60px;

平分网格容器可以使用rpeat函数

grid-template-columns: repeat(3, 1fr);

可以设置网格元素的最小和最大宽度

grid-template-columns: minmax(50px, auto) auto 60px;

创建显式行轨道

<body>
    <style>
        .wrapper{width: 300px;height: 300px;background-color: #ddd;}
        .wrapper>div{text-align: center;padding:5px}
        .wrapper>div:nth-child(even){background-color: #f0f;}
        .wrapper>div:nth-child(odd){background-color: #0ff;}
        .wrapper {
            display: grid;
            grid-template-rows: 1fr 1fr 1fr 1fr;
        }
    </style>
    <div class="wrapper">
        <div>one</div>
        <div>two</div>
        <div>three</div>
    </div>
</body>

隐式轨道的尺寸

设置隐式行轨道的高度

如果显式创建例轨道而没有显式创建行轨道，此时出现隐式的行轨道

<body>
    <style>
        .wrapper{width: 300px;height: 300px;background-color: #ddd;}
        .wrapper>div{text-align: center;padding:5px}
        .wrapper>div:nth-child(even){background-color: #f0f;}
        .wrapper>div:nth-child(odd){background-color: #0ff;}
        .wrapper {
            display: grid;
            grid-template-columns: minmax(50px, auto) auto 60px;
            grid-auto-rows: 50px;
        }
    </style>
    <div class="wrapper">
        <div>one</div>
        <div>two</div>
        <div>three</div>
    </div>
</body>

设置隐式列轨道的宽度

如果显示创建行轨道而没有显示创建列轨道，此时出现隐式的列轨道

<body>
    <style>
        .wrapper{width: 300px;height: 300px;background-color: #ddd;}
        .wrapper>div{text-align: center;padding:5px}
        .wrapper>div:nth-child(even){background-color: #f0f;}
        .wrapper>div:nth-child(odd){background-color: #0ff;}
        .wrapper {
            display: grid;
            grid-template-rows: minmax(50px, auto) auto 60px;
            grid-auto-columns: 50px;
        }
    </style>
    <div class="wrapper">
        <div>one</div>
        <div>two</div>
        <div>three</div>
    </div>
</body>

网格元素跨轨道

黑色标注为行轨道线

白色标注为列轨道线

在这里插入图片描述

跨越列轨道线

从第一条列轨道线跨越到第四条列轨道线

<body>
    <style>
        .wrapper{width: 300px;height: 300px;background-color: #ddd;}
        .wrapper>div{text-align: center;padding:5px}
        .wrapper>div:nth-child(even){background-color: #f0f;}
        .wrapper>div:nth-child(odd){background-color: #0ff;}
        .wrapper {display: grid;grid-template-columns: repeat(3, 1fr)}
        .box1{
            grid-column: 1/4;
        }
    </style>
    <div class="wrapper">
        <div class="box1">one</div>
        <div class="box2">two</div>
        <div class="box3">three</div>
        <div class="box4">six</div>
        <div class="box5">five</div>
    </div>
</body>

从第一条行轨道线跨越到第三条行轨道线

<body>
    <style>
        .wrapper{width: 300px;height: 300px;background-color: #ddd;}
        .wrapper>div{text-align: center;padding:5px}
        .wrapper>div:nth-child(even){background-color: #f0f;}
        .wrapper>div:nth-child(odd){background-color: #0ff;}
        .wrapper {display: grid;grid-template-columns: repeat(3, 1fr)}
        .box1{
            grid-row: 1/3;
        }
    </style>
    <div class="wrapper">
        <div class="box1">one</div>
        <div class="box2">two</div>
        <div class="box3">three</div>
        <div class="box4">six</div>
        <div class="box5">five</div>
    </div>
</body>

网格元素间距

grid-gap说明
10px行、列间距均为10px
10px 50px行间距为10px，列间距为50px
<body>
    <style>
        .wrapper{width: 300px;height: 300px;background-color: #ddd;}
        .wrapper>div{text-align: center;padding:5px}
        .wrapper>div:nth-child(even){background-color: #f0f;}
        .wrapper>div:nth-child(odd){background-color: #0ff;}
        .wrapper {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px 50px;
        }
    </style>
    <div class="wrapper">
        <div class="box1">one</div>
        <div class="box2">two</div>
        <div class="box3">three</div>
        <div class="box4">six</div>
        <div class="box5">five</div>
    </div>
</body>

网格布局

<body>
    <style>
        .wrapper{width: 300px;height: 300px;background-color: #ddd;}
        .wrapper>div{text-align: center;padding:5px}
        .wrapper>div:nth-child(even){background-color: #f0f;}
        .wrapper>div:nth-child(odd){background-color: #0ff;}
        .wrapper {
            display: grid;
            grid-template-areas: 
            'one one one'
            'two three four'
            'five six six';
        }
        .box1{grid-area: one;}
        .box2{grid-area: two;}
        .box3{grid-area: three;}
        .box4{grid-area: four;}
        .box5{grid-area: five;}
        .box6{grid-area: six;}
    </style>
    <div class="wrapper">
        <div class="box1">one</div>
        <div class="box2">two</div>
        <div class="box3">three</div>
        <div class="box4">four</div>
        <div class="box5">five</div>
        <div class="box6">six</div>
    </div>
</body>

可以使用.来流出空白区域

grid-template-areas: 
'. one .'
'two three four'
'five six six';

网络元素堆叠

z-index的相同时，后面的网格元素覆盖前面的网格元素

z-index的值越大，越靠上

<body>
    <style>
        .wrapper{width: 300px;height: 300px;background-color: #ddd;}
        .wrapper>div{text-align: center;padding:5px}
        .wrapper>div:nth-child(even){background-color: #f0f;}
        .wrapper>div:nth-child(odd){background-color: #0ff;}
        .wrapper {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }
        .box1{
            grid-column: 1/4;
            grid-row:1/3;
            z-index: 1;
        }
        .box2{
            grid-column: 1/3;
            grid-row: 2/4;
        }
    </style>
    <div class="wrapper">
        <div class="box1">one</div>
        <div class="box2">two</div>
    </div>
</body>

变形

transform说明
rotate旋转
scale缩放
translate位移
skew斜切
rotate(45deg) skew(20deg)旋转 斜切

旋转

rotate说明
45deg顺时针旋转45°
-45deg逆时针旋转45°
<body>
    <style>
        body{height: 100vh;display: flex;justify-content: center;align-items: center;}
        div{width: 200px;height: 200px;position: absolute;}
        .box1{background-color: #ccc;}
        .box2{background-color: rgba(255,0,255,0.5);transition: transform 1s;}
        .box2:hover{
            transform: rotate(45deg);
        }
    </style>
    
    <div class="box1"></div>
    <div class="box2 rotate"></div>
</body>

缩放

scale说明
0.5缩小0.5倍，原尺寸x0.5
1不缩放
2放大2倍，原尺寸x2
0.5 2x轴缩小0.5倍 y轴放大2倍
<body>
    <style>
        body{height: 100vh;display: flex;justify-content: center;align-items: center;}
        div{width: 200px;height: 200px;position: absolute;}
        .box1{background-color: #ccc;}
        .box2{background-color: rgba(255,0,255,0.5);transition: transform 1s;}
        .box2:hover{
            transform: scale(2);
        }
    </style>
    
    <div class="box1"></div>
    <div class="box2 rotate"></div>
</body>

位移

translate说明
50px延x轴向右偏移50px
-50px延x轴向左偏移50px
50px,30px延x轴向右偏移50px，延y轴向下偏移30px
50px,-30px延x轴向右偏移50px，延y轴向上偏移30px
<body>
    <style>
        body{height: 100vh;display: flex;justify-content: center;align-items: center;}
        div{width: 200px;height: 200px;position: absolute;}
        .box1{background-color: #ccc;}
        .box2{background-color: rgba(255,0,255,0.5);transition: transform 1s;}
        .box2:hover{
            transform: translate(50px);
        }
    </style>
    
    <div class="box1"></div>
    <div class="box2 rotate"></div>
</body>

只调整x轴的偏移量

transform: translateX(50px);

只调整y轴的偏移量

transform: translateY(50px);

斜切

skew说明
10deg延x轴斜切10°（可以理解为x轴逆向旋转了10°）
10deg,20deg延x轴斜切10°，延y轴斜切20°，（可以理解为x轴逆向旋转了10°，y轴顺向旋转了20°）
-10dge延x轴斜切-10°
<body>
    <style>
        body{height: 100vh;display: flex;justify-content: center;align-items: center;}
        div{width: 200px;height: 200px;position: absolute;}
        .box1{background-color: #ccc;}
        .box2{background-color: rgba(255,0,255,0.5);transition: transform 1s;}
        .box2:hover{
            transform: skew(10deg,20deg);
        }
    </style>
    
    <div class="box1"></div>
    <div class="box2"></div>
</body>

原点设置

transform-origin说明
center原点在元素中心，默认值
top left原点在元素左上角
bottom left原点在元素左下角
top right原点在元素右上角
bottom right原点在元素右下角
50px 50px原点在元素 50px,50px 的位置
<body>
    <style>
        body{height: 100vh;display: flex;justify-content: center;align-items: center;}
        div{width: 200px;height: 200px;position: absolute;}
        .box1{background-color: #ccc;}
        .box2{
            background-color: rgba(255,0,255,0.5);
            transition: transform 1s;
            transform-origin: left top;
        }
        .box2:hover{
            transform: rotate(45deg);
        }
    </style>
    
    <div class="box1"></div>
    <div class="box2"></div>
</body>

动画

过度动画

元素从一种状态过渡到另一种状态

过度动画需要使用:hover、:active 或者 JavaScript进行触发

transition:属性名 过度时间;
transition:属性名 过度时间 延迟时间;
transition:属性名 过度时间 过度函数 延迟时间;
transition:属性名1 过度时间, 属性名2 过度时间;

过度函数图示说明
linear在这里插入图片描述恒速
ease在这里插入图片描述开始和结束速度快，中间速度慢慢
ease-in在这里插入图片描述开始缓慢，逐渐加速
ease-in-out在这里插入图片描述开始逐渐加速，最后逐渐减速
ease-out在这里插入图片描述快速开始，缓慢结束
step-start在这里插入图片描述立即跳到结束位置
step-end在这里插入图片描述保持初始状态

进入和离开都会有动画效果

<body>
    <style>
        body{height: 100vh;display: flex;justify-content: center;align-items: center;}
        div{width: 200px;height: 200px;position: absolute;}
        .box1{
            background-color: red;
            transition: background-color 3s;
        }
        .box1:hover{
            background-color: blue;
        }
    </style>
    
    <div class="box1"></div>
</body>

如果只有进入时产生动画效果，则将transition 放入最终状态

.box2:hover{
    transition: background-color 3s;
    background-color: blue;
}

所有样式的变化都进行动画

transition: all 3s;

自定义动画

animation:动画名称 动画时间;

animation:动画名称 动画时间 过度函数 延迟时间;

animation:动画名称 动画时间 过度函数 延迟时间 播放次数 动画方向 填充模式;

播放次数说明
数值具体的次数，例如：1为播放1次，0.5为播放一半
infinite无限循环播放
动画方向说明
normal默认值，每次都从头开始播放动画
alternate第一次正向播放动画，第二次反向播放动画，以此类推
reverse每次都反向播放动画
alternate-reverse第一次反向播放动画，第二次正向播放动画，以此类推
填充模式说明
forwards应用最后一帧的样式
backwards应用第一帧的样式
both正向播放停留在最后一帧，反向播放停留在第一帧

所有的过渡动画都可以被自定义动画替代

<body>
    <style>
        body{height: 100vh;display: flex;justify-content: center;align-items: center;}
        div{width: 200px;height: 200px;position: absolute;}
        .box1{background-color: red;}
        .box1:hover{animation: changeColor 3s;}
        @keyframes changeColor{
            form {
                background-color: red;
            }
            to {
                background-color: blue;
            }
        }
    </style>
    
    <div class="box1"></div>
</body>

如果动画开始样式和元素的初始样式相同，则可以省略form元素

<body>
    <style>
        body{height: 100vh;display: flex;justify-content: center;align-items: center;}
        div{width: 200px;height: 200px;position: absolute;}
        .box1{background-color: red;}
        .box1:hover{animation: changeColor 3s;}
        @keyframes changeColor{
            to {
                background-color: blue;
            }
        }
    </style>
    
    <div class="box1"></div>
</body>

我们也可以调控动画在过程中的状态变化

<body>
    <style>
        body{height: 100vh;display: flex;justify-content: center;align-items: center;}
        div{width: 200px;height: 200px;position: absolute;}
        .box1{background-color: red;}
        .box1:hover{animation: changeColor 5s;}
        @keyframes changeColor{
            45% {
                background-color: green;
            }
            70% {
                background-color: yellow;
            }
            100% {
                background-color: blue;
            }
        }
    </style>
    
    <div class="box1"></div>
</body>
樊尘大大怪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS-常见的伪类选择器的用法详解
weixin_44486539的博客
10-01 588
:first-child :first-child 相对于父级元素做参考，选择所有子元素中的第一个子元素，第一个子元素必须是规定的元素类型，如果不是则不会被选择 示例： <dl> <dt>我的颜色</dt> <dd>颜色</dd> <dd>颜色</dd> <dt>我的颜色</dt> ...
css3官方帮助文档中文版
07-18
css3官方帮助文档中文版
第四天，背景边框列表链接和更复杂的选择器
zcker
07-01 138
背景 background-color 接受任何合法的颜色值 background-image 默认情况下，大图不会缩小以适应方框，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。在这种情况下，实际的图像只是单独的一颗星星。 不能继承 语法：url() 多背景：url(image1.png), url(image2.png), url(image3.png), url(image1.png) background-repeat no-repeat — 不重复。 repeat-x —水平重复。
前端学习 day2
qq_40320426的博客
03-10 65
学习打卡，最近几天看视频学习css。进度很慢 记录一下选择器: 常用选择器: 元素选择器:标签名{} id选择器:#id属性值{} 类选择器:.class属性值{} 通配选择器:*{} 复合选择器: 交集选择器:选择器1选择器2选择器3…选择器n{} 若交集选择器中有元素选择器，必须用元素选择器开头 并集选择器:选择器1,选择器2,选择器n{} 关系选择器: 子选择器:父元素>子元素 后代选择器:祖先 后代 选择下一个兄弟:前一...
CSS: :last-child 与 :first-child的坑
热门推荐
weixin_39015132的博客
07-23 5万+
原文链接 前言 前端开发中，我们有时候要为第一个或最后一个元素设置进行某些特殊的操作。CSS默认为我们提供了:last-child和:first-child选择器， 但是在实际使用中，要特别需要注意一个点。 开始 :last-child:指定属于其父元素的最后一个子元素的 p 元素的背景色。（来自W3C的官方描述） 实践 HTML: <div class="div1"&gt...
css 元素与内容距离padding
LRON的博客
11-28 267
特性：padding版本：CSS1　 目的：设置元素与内容的距离 常用 语法： padding : length 参数： length : 　由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。请参阅长度单位 特性：padding-top版本：CSS1　 目的：设置元素顶部与内容顶部的距离 语法： padding-top : length 参数： ...
1.07 css3新特性
最新发布
10-07
本资源摘要信息主要介绍CSS3的新特性，包括CSS3的介绍、CSS3选择器、CSS3文本、CSS3边框、CSS3背景、CSS3颜色、CSS3渐变、CSS3盒模型等。 CSS3介绍 CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，...
CSS3 Succinctly
09-09
《CSS3 Succinctly》，作者是 Peter Show,非图片版本，绝对高清。
思维导图css及css3
11-01
思维导图又称脑图，是一种图像式思维的工具以及一种利用图像式思考辅助工具。通过脑图使学习css及css3会更加简单，能够更好的进行记忆、理解。
css3风车效果
06-08
css3写的一个小效果，css3写的一个小效果，css3写的一个小效果，css3写的一个小效果，
CSS3 公共样式文件 Normalize.css
10-22
CSS3 公共样式文件 Normalize.css
Professional CSS3
10-02
Professional CSS3Professional CSS3Professional CSS3Professional CSS3Professional CSS3
CSS3 开发工具收集
09-25
在网页设计和开发领域，CSS3已经成为不可或缺的一部分，它带来了丰富的样式效果和强大的布局能力。然而，由于浏览器之间的兼容性问题，开发者在使用CSS3时可能会遇到挑战。本文将介绍一些CSS3开发工具，帮助开发者更...
CSS3 display知识详解
09-24
本篇文章给大家介绍css3 display知识详解，涉及到css3 display相关知识，感兴趣的朋友一起学习吧
28种纯CSS3炫酷loading加载动画特效
12-13
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效。这组loading动画共有27种不同的效果。每一种loading动画都是通过CSS3的keyframes帧动画来完成的，每一个加载动画都构思新颖，效果非常的酷。
html中css与左侧距离,html+css实现左侧定宽，右侧自适应的布局
weixin_36204992的博客
05-31 822
实现一侧定宽，一侧自适应的布局的方法a 、ba、利用左侧元素浮动，或者绝对定位的方式使其脱离常规文档流1、方法一：利用float和margin来实现css.father{border:1px solid #444;overflow:hidden;}.father img{width:60px;height:64px;float:left}.father p{margin-left:70px;pad...
jQuery基础 各个选择器
shi15062772894的博客
12-28 615
jQuery的优势 体积小，压缩后只有100KB左右 强大的选择器 出色的DOM封装 可靠的事件处理机制 出色的浏览器兼容性 使用隐式迭代简化编程 丰富的插件支持 jQuery基本语法 使用jQuery弹出提示框 <script> $(document).ready(function() { alert("我欲奔赴沙场征战jQuery，势必攻克之！"); }); </script> $(document).ready()：$(doc...
爬虫基础 2.2 网页基础
weixin_34343689的博客
06-08 115
2.2 网页基础 浏览器浏览的网页，均是浏览器根据超文本，CSS,以及，JS，的解解析规则，对服务器返回的数据进行解析加载，进而变成我们所见的页面。 2.21 网页的组成 1 HTML 构成网页的框架 定义网页的内容 2 CSS 构成框架中的元素的样式 规定网页的布局 3 JavaScript 对网页行为进行编程 动画，酷炫的效果等 ...
css定位左移动多少距离
weixin_30518397的博客
11-02 351
.main .logo { padding-left:82px; } 说明： .main .logo这个标签的路径离边框的距离是82Px 转载于:https://www.cnblogs.com/914556495wxkj/p/3403852.html
CSS3 transition属性详解与应用
"CSS3中的transition属性用于创建平滑过渡效果，让CSS属性的变化过程变得流畅。这个属性允许你指定一个或多个CSS属性如何随时间变化，包括变化的持续时间、速度曲线以及延迟时间。transition属性的语法结构复杂，但...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值