CSSdemo03

最新推荐文章于 2024-04-25 20:05:52 发布

l2974688765

最新推荐文章于 2024-04-25 20:05:52 发布

阅读量68

点赞数

本文链接：https://blog.csdn.net/l2974688765/article/details/119829569

版权

css选择器

css选择器有：
1.行内样式
在HTML标签里写style属性及相应的属性值。
2.id选择器
在HTML标签里用id属性写id名后用css样式表用#+id名字{}方式，在括号内写相应的属性及属性值。
注意： 通常表示一个区域的外围结构(唯一性的)
例子：

    <style>
        
        #box {
            color: red
        }
    </style>
<body>
    <div id="box"></div>
    </body>

3.class（类）选择器
用法：在HTML标签里用class属性写class名后用css样式表用,.+class名字{}方式，在括号内写相应的属性及属性值。
例子：

<style>
.box{属性名：属性值
}
</style>

4.标签选择器
用法：
直接在css样式表写标签名{}
例子：

<style>
div{
属性名：属性值}
</style>

5.群组选择器
选中相同的属性
.选择器1,选择器2,…{}

<style>
li,em,b{
属性名：属性值}
</style>

6.包含选择器
用法:
父亲元素子集元素{}
例子：

<style>
#div .box ul li{
属性名：属性值}
</style>

7.*通配符选择器
用法： * {margin:0;padding:0}一般用于清除浏览器的默认内外边距

8.伪类选择器：
用法：在有需要的选择器后加：伪类名{}
a:link {color: red;} /* 未访问的链接状态 /
a:visited {color: green;} / 已访问的链接状态 /
a:hover {color: blue;} / 鼠标滑过链接状态 /
a:active {color: yellow;} / 鼠标按下去时的状态 */

例子：

<style>
#div .box ul li ：hover{
属性名：属性值}
</style>

选择器权重

权重:选择器加载的顺序优先级 0 0 0 0
- 行内样式表 1000
- 标签选择器 0001
- id选择器 0100
- class选择器 0010
- 包含选择器相加
- 群组选择器各自计算
- 通配符 0000
- 伪类选择器 0010
- 新增的权重表达方式属性:属性值 !important

浮动

作用
控制元素在水平方向移动
可以浮动实现文字环绕图片
属性名 float
属性值 left （左浮动）/right（右浮动）/none(默认)

特性
1.会使元素脱离文档流
2.浮动元素碰到浮动元素时会停止浮动
3.当父级元素宽度不足以让浮动元素上去时会在下一行找到合适位置停放
4.当浮动元素碰到父级时会停止浮动

盒子模型

作用
盒模型: 设置元素与元素位置之间的关系
组成：
content （内容）padding（内边距）margin（外边距）border（边框）
计算方式
- 计算盒子的自身大小 content+padding+border
- 计算盒子在浏览器占的真实大小 content+padding+border+margin

在这里插入图片描述
属性值
margin外边距
left左边距 right 右边距 top 上边距 bottom 下边距

margin:外边距表示多个快递盒之间的间距
- margin设置的是同级元素位置之间的距离
- margin设置外边距哪个元素需要移动就给哪个元素添加
- margin不会撑大当前盒子的宽高大小

margin的方向值问题：前端的方向都是沿着顺时针去转的
- margin设置一个值:表示上下左右
- margin设置两个值:表示上下左右
- margin设置三个值:表示上左右下
- margin设置四个值:表示上右下左
- 方向的属性 margin-top/right/bottom/left

总结:内外边距的固定用法
- *{margin:0;padding:0} 元素的内外边距清空
- 版心{margin:0 auto} 版心居中

margin常见的bug
- 当父级元素只有一个子级元素的时候设置子级元素距离父级元素的边距 margin-top 会错误解析到父级元素
- margin换padding
- 给父级设置边框
- 给父级设置浮动
- 给父级设置文本溢出属性

当两个同级元素默认从上大小排列的时候给两个元素分别设置margin-bottom/top 会错误的取之间最大值
- 设置一个方向上的值即可
padding 内边距
内边距:填充、补白在快递模型中是泡沫报纸等起到缓冲物品的作用
- padding是用来设置父级元素与子级元素位置之间的关系
- padding的属性值数值+单位(px)
- paddding的添加位置
- 通常情况下是给父级添加的,会把父级元素撑大,为了不破坏初始为布局需要减去相应的padding值
- 子级元素添加padding 依然会撑大容器的大小

l2974688765

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSSdemo03

css选择器css选择器有：1.行内样式在HTML标签里写style属性及相应的属性值。2.id选择器在HTML标签里用id属性写id名后用css样式表用#+id名字{}方式，在括号内写相应的属性及属性值。注意：通常表示一个区域的外围结构(唯一性的)例子： <style> #box { color: red } </style><body> <div
复制链接

扫一扫