标签：box 盒子 标签 元素 边框 border 选择器 CSS
CSS选择器
CSS选择器通常用于对网页中（<body>中）元素样式进行整体控制，写在<head></head>标签中的<style></style>标签下
将常用的CSS选择器按优先级可以进行如下的排列：
!important>内联样式>id选择器>类选择器>标签选择器>*选择器
当有多个同类型选择器时，为累加方式计算权重。比如两个标签选择器进行嵌套操作时，权重优先级大于一个单独的标签选择器
标签选择器：根据html标签名来进行选择，比如如果想将<div>hello</div>中元素的颜色改为红色，字体大小改为50px，则可以：
div{
color: red;
font-size: 50px;
}类选择器：只要类名相同，进行统一控制，包括同名，也就是说多个标签可以取相同的类名
类名可以写多个，比如class="div1 div2 div3"；如果以div1为类名，在标签中的使用样式为：
<div class="div1">world</div>
使用(.)字符加上类名进行选择：
.div1{
color: seagreen;
}id选择器：id值一般不可以重复，为唯一值，因此id选择器被用来选择唯一的元素；用(#)字符加上id名进行选择：
#box{
color: skyblue;
font-size: 40px;
}*选择器：是一种通用选择器，用于选择所有的html标签，权重优先级最低：
*{
color: blue;
}后代选择器：当两个不同类名的标签进行嵌套时，使用后代选择器进行控制，如以下嵌套：
<div class="parents">
<div class="div1">html</div>
</div>可以使用后代选择器进行控制：
.parents .div1{
color:coral;
}内联样式 style：如果不想使用CSS进行样式控制，则可以直接在标签上使用内联样式进行控制，如：
<div style="color: tan;">Demo</div>CSS常用方法
现在要在页面中创建一个带字符内容的矩形，要求拥有外边距、边框以及内边距，使用CSS进行描述：
例1:
.box{
width: 100px;/*内部元素框宽*/
height: 100px;/*内部元素框高*/
background-color: red;/*背景色*/
margin: 200px;/*外边距*/
border: 5px solid blue;/*边框（分别为宽度，样式，颜色）*/
padding: 10px;/*内边距*/
/*此时外边距与边框不会影响内部元素大小*/
}该元素的盒子模型为：
在浏览器中的显示效果为：
可以看出我们创建了一个外边距为200px，边框宽度为5，内边距为10，内部元素框大小为100*100，整体大小为130*130（内部元素框100+内边距10+10+边框宽度5+5）的矩形。
在CSS中，我们也可以单独调整单独一侧的内外边距、边框宽度以及使用缩写：
margin-top: 50px;/*上外边距*/
margin-right: 90px;/*右外边距*/
margin-left: 80px;/*左外边距*/
margin-bottom: 70px;/*下外边距*/
margin: 100px 90px 80px 70px;/*缩写，四个值，上右下左*/
margin: 80px，0;/*当只有两个值时：第一个值代表上下，第二个值代表左右
margin: 100px 50px 10px/*三个值时：第一个值代表上，第二个值代表左右，第三个值代表下*/
border-width: 5px;/*单独调整边框宽度、样式、颜色*/
border-style: solid;
border-color: black;CSS盒子模型
在刚才的例1中，我们设置了一个内部元素框大小为100*100的矩形，但是想要确定矩形的整体大小，只能再对边框以及内边距单独进行设置，有没有一种方法可以先确定矩形的整体大小，然后再对内部单独进行调整呢？
可以通过调整box-sizing属性来进行更改，box-sizing拥有两种属性：
box-sizing: content-box以及box-sizing: border-box
当不进行单独说明时，元素默认为content-box，意味着width与height设置为内部元素框的宽度与高度；
如果进行box-sizing: border-box说明，则width与height为对整体矩形大小进行设置；
比如将例1中加上box-sizing: border-box：
.box{
width: 100px;/*宽*/
height: 100px;
background-color: red;/*背景色*/
margin: 200px;/*外边距*/
border: 5px solid blue;/*边框（宽度，样式，颜色）*/
padding: 10px;/*内边距*/
/*此时外边距与边框会影响内部元素框大小*/
box-sizing: border-box;
}在加上border-box说明后，这时元素的盒子模型将变为：
可以看到矩形的整体从130*130变为了100*100（内部元素框70+内边距10+10+边框宽度5+5），内部元素框大小因此受到影响，从100*100变为了70*70
标签：box,盒子,标签,元素,边框,border,选择器,CSS 来源： https://blog.csdn.net/qq_33402172/article/details/118873328
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。