2024-11-07 厉飞雨 阅读(23) 评论(0) 赞(3)

**A\~B (波浪号)** 选择前面有A元素的所有B标签 为相同父元素中位于A标签后的所有B元素设置样式 两种元素必须拥有相回的父元素，但是B不必真接紧随A出现 **A\>B (大于号)** 是CSS3特有选择器，表示选则A元素的子元素中所有B元素 与AB的区别 A B 选择所有后代元素，但是A\>B 只选择一代 **A，B (逗号)** 同时选择A B 两个...

2024-11-07 厉飞雨 阅读(25) 评论(0) 赞(5)

font-weight 字体粗细 ---------------- | 属性 | 说明 | 对应值 | |---------|---------|-----| | norml | 正常（默认值） | 100 | | lighter | 较细 | 400 | | bold | 较粗 | 700 | | bolder | 很粗 ...

2024-11-07 厉飞雨 阅读(33) 评论(0) 赞(4)

边框样式 ---- ### border-width border-width用于定义边框的宽度，通常是一个像素值。 ### border-style border-style用于定义边框的风格，通常有三种： | 属性 | 说明 | |--------|-----| | none | 无样式 | | dashed | 虚线 | | solid | 实...

2024-11-07 厉飞雨 阅读(24) 评论(0) 赞(3)

表格标题位置 ------ **语法** ：`caption-side:取值;` 默认情况下，表格标题是在表格的顶部，属性为：top，如果想把标题放在底部，属性为：bottom。 如果想要定义表格标题的位置，在table或caption这两个元素的CSS中定义caption-side属性，效果是一样的，一般情况，我们只在table中定义就行。 表格边框合并 ------...

2024-11-07 厉飞雨 阅读(23) 评论(0) 赞(3)

权重比较 ---- 1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 \> 内嵌样式表 \> 外部样式表（就近原则） 2、对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 \> 类选择器 \> 标签选择器 3、外部样式表的ID选择器 \> 内嵌样式表的标签选择器 计算权重 ---- ![](...

2024-11-07 厉飞雨 阅读(18) 评论(0) 赞(3)

1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置。 ※ 相当于从地面飘到了空中，如果一个元素按照正常的标准流来显示，会在html中所属的位置上占位，后面的元素会紧跟着它，但是浮动脱离了标准流，以后我们在看到浮动的元素之后，不能以正常的标准流里进行判断。 2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素。 3. 浮动找浮动，下一个浮动元素会在上一个浮...

2024-11-07 厉飞雨 阅读(25) 评论(0) 赞(2)

1.直接设置父元素的高度 ------------ **优点：** 简单粗暴、方便。 **缺点：** 有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块等。 2.额外标签法 ------- **操作：** 1. 在父元素内容的最后添加一个块级元素 2. 给添加的块级元素设置clear：both **缺点：** 会在页面中添加额外的标签，会让页面的HTML结构变...

2024-11-07 厉飞雨 阅读(21) 评论(0) 赞(5)

静态定位： ----- 静态定位是默认值，就是之前认识的标准流。 代码：postion:static 静态定位不能通过方向偏移值来改变。 相对定位： ----- 自恋型定位，相对于自己之前的位置进行移动。 代码：postion:relative 1. 需要配合访问属性来移动 2. 相对于自己原来的位置进行移动 3. 在页面中占位置→没有脱标 **应用场景*...

2024-11-07 厉飞雨 阅读(29) 评论(0) 赞(4)

**场景：** 让盒子四个角变得圆润，增加页面细节，提升用户体验。 **属性名：** border-radius **常见取值：** 数字+px、百分比 **写法：** ```lang-css border-radius:50px; 或 border-radius:10%; ``` **原理：** ![](http://static.51tbox.com/stati...

2024-11-07 厉飞雨 阅读(36) 评论(0) 赞(3)

使用 `background-image`属性实现渐变背景效果 渐变是多个颜色逐渐变化的视觉效果，一般用于设置盒子的背景色。 **俩种颜色间渐变语法：** ```lang-css background-image: linear-gradient( 颜色1, 颜色2 ); ``` **从透明到半透明语法：** ```lang-css backgrou...