盒子模型、选择器、类选择器、 ID选择器、属性选择器、关系选择器、并选择器、通配符选择器及代码

最新推荐文章于 2024-04-03 14:30:42 发布

VIP文章坚持曾今曾坚持的

最新推荐文章于 2024-04-03 14:30:42 发布

阅读量280

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/qq_44791674/article/details/108261654

版权

2.7盒子模型（重要）

Margin：外边距
Margin-top(上) ， margin-bottom（下）， margin-left（左） margin-right（右）
使用方式：
（1） margin：30px ，表示上下左右外边距都设置30px
（2） margin-left：30px ，表示设置距离左方30px
（3） margin： 10px 20px 10px 20px 分别设置上右下左四个边的边距，顺序按照顺时针方向
（4） margin：20px 30px 分别设置上下边距为20px ，左右边距为30px
Padding：内边距
与margin类似上下左右边距都有
Border：边框
Border-width:边框宽度
Border-style:边框线条类型
Border-color:边框的颜色
简写：border: 10px(宽度) red(颜色) solid(形状/风格)
在这里插入图片描述

3.选择器

3.1元素选择器
用标签名来作为选择器，选中所有相应的元素
在这里插入图片描述

3.2类选择器

根据class的属性来选择元素，样式定义为：
.className{ xxxxxxx}
在这里插入图片描述

3.3 ID选择器

根据id名来选择元素，样式定义为：
#idName{xxxxxxxxx}
在这里插入图片描述

3.4属性选择器

在这里插入图片描述
例：[title*=’d’]:选择title值中包含d的元素

3.5关系选择器

E F ：选择E元素的后代元素F（所有后代，包括子类、孙类）
E > F : 选择E元素的直接后代元素（也就是子类）
E + F：选择E元素的第一个弟弟元素F
E ~ F: 选择E元素的所有弟元素F

3.6并选择器

将相同的样式放在一起，类名直接用逗号分开
在这里插入图片描述

3.7 通配符选择器

通配符选择器可以选中页面所有的标签
*
写法：*{xxxxxxx}
在这里插入图片描述

关系选择器.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
    
				border: 1px green solid;
				min-height: 30px;
				max-width: 300px;
				margin-left: 50px;
				background-color: white;
			}
			#myself~div{
    
				background-color: greenyellow;
			}

最低0.47元/天解锁文章

坚持曾今曾坚持的

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型、选择器、类选择器、 ID选择器、属性选择器、关系选择器、并选择器、通配符选择器及代码

2.7盒子模型（重要）Margin：外边距Margin-top(上) ， margin-bottom（下）， margin-left（左） margin-right（右）使用方式：（1） margin：30px ，表示上下左右外边距都设置30px（2） margin-left：30px ，表示设置距离左方30px（3） margin： 10px 20px 10px 20px 分别设置上右下左四个边的边距，顺序按照顺时针方向（4） margin：20px 30px 分别设置上下边距为
复制链接

扫一扫