2 CSS盒子模型&边框&轮廓&外边距&填充&分组嵌套&尺寸&display与visibility

weixin_38166557

于 2019-09-05 20:40:00 发布

阅读量189

点赞数

原文链接：http://www.cnblogs.com/ltfxy/p/11469569.html

版权

盒子模型 Box Model

所有HTML元素可以看做盒子，CSS模型本质上是一个盒子，封装周围的HTML元素
包括：边距,边框,填充和实际内容
盒子模型允许我们在其他元素和周围元素边框之间的空间放置元素

Margin（外边距）：清除边框区域。Margin没有背景颜色，完全透明

border（边框）：边框周围的填充和内容，受到盒子的背景颜色的影响

Padding(内边距) : 清除内容周围的区域。会受到框中填充的背景颜色影响

content（内容）：盒子的内容，显示文本和图像

CSS Border（边框）：

围绕元素内容和内边距的一条或者多条线，对于这些线条，可以自定义它们的样式、宽度、颜色。

使用CSS边框属性，我们可以创建出比HTML中更加优秀的效果。

border-style（边框样式）：

none：默认无边框
dotted:定义一个虚线框
solid：定义一个实线边界
double：定义两个边界，两个边界的宽度和border-width的值相同
groove：定义3D沟槽边界，效果取决于边界的颜色值
ridge:定义3D脊边界，效果取决于边界的颜色值
inset：定义一个3D的嵌入边框，效果取决于边界的颜色值
outset:定义一个3D突出边框。效果取决于边界的颜色值
transparent:透明不可见的边框，必要时可以使其可见

border-color(边框颜色)：

name：指定颜色名称
RGB：指定RGB值
Hex：指定16进制值

各个侧面单独设置边框：

border-top-style:dotted
border-right-style:solid
border-bottom-style:dotted
border-left-style:solid

CSS轮廓（outline）：

轮廓是会绘制于元素周围的一条线，位于边框边缘的外围，起到突出元素的作用
轮廓属性指定了样式，颜色和外边框的宽度
轮廓属性的位置让他不像边框那样参与到文档流中，因此轮廓出现或消失时不会影响文档流，即不会导致文档的重新显示

CSS Margin：外边距

Margin属性定义元素周围的空间，外边距无背景颜色且完全透明
margin属性接收任何长度单位、百分数值甚至负值
margin可以单独改变元素的上下左右编剧，也可以一次改变所有的属性

CSS Padding(填充）

padding属性定义元素边框与元素内容之间的空间
被清除的padding属性所释放的区域将被背景颜色填充
单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变
填充属性可以使用长度值(pt,em,px)或者百分比值，但与margin属性不同，它不允许使用负值

padding可以有一到四个值：

padding:25px 50px 75px 100px

上填充为25px
右填充为50px
下填充为75px
左填充为100px

padding:25px 50px 75px

上填充为25px
左右填充为50px
下填充为75px

padding:25px 50px

上下填充为25px
左右填充为50px

padding:25px

所有的填充都是25px

CSS嵌套和分组

CSS分组可以具有相同样式的选择器进行分组，减少代码量
CSS嵌套适用于选择器内部的选择器样式

分组：

h1,h2,p
{
color:green;
}

嵌套：

<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
p
{
    color:blue;
    text-align:center;
}
.marked
{
    background-color:red;
}
.marked p
{
    color:white;
}
</style>
</head>

<body>
<p>This paragraph has blue text, and is center aligned.</p>
<div class="marked">
<p>This paragraph has not blue text.</p>
</div>
<p>p elements inside a "marked" classed element keeps the alignment style, but has a different text color.</p>
</body>
</html>

CSS尺寸：

CSS Display and Visibility：

隐藏元素：

display设置为none
visible设置为hidden
区别：
display隐藏元素，元素不再占用空间
visibility隐藏元素，元素依然影响布局

同行显示：

li {display:inline;}

span转换成块元素：

span {display:block;}

转载于:https://www.cnblogs.com/ltfxy/p/11469569.html

weixin_38166557

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2 CSS盒子模型&边框&轮廓&外边距&填充&分组嵌套&尺寸&display与visibility

盒子模型 Box Model所有HTML元素可以看做盒子，CSS模型本质上是一个盒子，封装周围的HTML元素包括：边距,边框,填充和实际内容盒子模型允许我们在其他元素和周围元素边框之间的空间放置元素Margin（外边距）：清除边框区域。Margin没有背景颜色，完全透明border（边框）：边框周围的填充和内容，受到盒子的背景颜色的影响P...
复制链接

扫一扫