赵博-20201029

盒模型--边框(一)
盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
如下面代码为div来设置边框粗细为2px、样式为实心的、颜色为红色的边框:
div{
    border:2px  solid  red;
}
上面是border代码的缩写形式,可以分开写:
div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}
ps:{
1、border-style(边框样式)常见样式有:
dashed(虚线)| dotted(点线)| solid(实线)。

2、border-color(边框颜色)中的颜色可设置为十六进制颜色,如:
border-color:#888;//前面的井号不要忘掉。}

盒模型--边框(二)
css样式中允许只为一个方向的边框设置样式:
div{border-bottom:1px solid red;}
同样可以使用下面代码实现其它三边上、右、左边框的设置:
border-top:1px solid red;
border-right:1px solid red; 
border-left:1px solid red;

盒模型--边界
元素与其它元素之间的距离可以使用边界(margin)来设置。边界也是可分为上、右、下、左。如下代码:
div{margin:20px 10px 15px 30px;}
也可以分开写:
div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}
如果上下左右的边界都为10px;可以这么写:
div{ margin:10px;}
如果上下边界一样为10px,左右一样为20px,可以这么写:
div{ margin:10px 20px;}
总结一下:padding和margin的区别,padding在边框里,margin在边框外。

盒模型--填充
元素内容与边框之间是可以设置距离的,称之为填充。填充也可分为上、右、下、左。如下代码:
div{padding:20px 10px15px 30px;}
顺序一定不要搞混。可以分开写上面代码:
div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}
如果上、右、下、左的填充都为10px;可以这么写
div{padding:10px;}
如果上下填充一样为10px,左右一样为20px,可以这么写:
div{padding:10px 20px;}

盒模型代码简写
还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左。具体应用在margin和padding的例子如下:
margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/
通常有下面三种缩写方法:
1、如果top、right、bottom、left的值相同,如下面代码:
margin:10px 10px 10px 10px;
可缩写为:
margin:10px;
2、如果top和bottom值相同、left和 right的值相同,如下面代码:
margin:10px 20px 10px 20px;
可缩写为:
margin:10px 20px;
3、如果left和right的值相同,如下面代码:
margin:10px 20px 30px 20px;
可缩写为:
margin:10px 20px 30px;

颜色值缩写
例子1:
p{color:#000000;}
可以缩写为:
p{color: #000;}
例子2:
p{color: #336699;}
可以缩写为:
p{color: #369;}

css布局模型
1、流动模型(Flow)
2、浮动模型 (Float)
3、层模型(Layer)

流动模型(一)
流动(Flow):自上而下。
流动模型(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
流动布局模型具有2个的特征:

第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。

第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。
右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。

浮动模型
div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>

心得体会:通过今天的学习,我了解了盒子模型是什么,学到了如何选择背景,改变背景,在之后的学习当中我需要更加努力学习型的知识。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1