CSS初始化、盒子深入

简介: CSS初始化html元素表现的差异性:虽然html被称为一种标准,但其并非是“强制标准”。——则各个浏览器公司做出来的浏览器产品或多或少总有一些差异。最终,通常的做法是:我们将所有各个浏览器中的html的初始标签全部“清除”——即实现类似没有“表形”功能的html。

CSS初始化

html元素表现的差异性:虽然html被称为一种标准,但其并非是“强制标准”。——则各个浏览器公司做出来的浏览器产品或多或少总有一些差异。
最终,通常的做法是:我们将所有各个浏览器中的html的初始标签全部“清除”——即实现类似没有“表形”功能的html。
比如很多标签有初始的margin,或padding,或字的大小或粗细,斜体等等效果,则我们使用一些css设置将这些初始表现全部“清空”,比如:

*{
    font-size:12px;
    margin:0;
    padding:0;
    font-weight:normal;
    font-style:normal;
    list-style-type:none;}

这样之后,所有的每个标签所需要的表现,都需要我们自己来使用css设置。
实际应用中,我们一般都是使用一个通用的css文件来完成此工作。
写在<link rel="stylesheet" type="text/css"href="css/init.css" />

样式分类

  1. 行内样式:
    a) <标签名 其他标签属性……. style=”css属性1:值1;css属性2:值2; …… ” >内容部分</标签名>
    b) 只对当前标签有效:通常不推荐使用,或偶尔临时使用。
  2. 页内样式:
    a) <style>
    选择器1{ ….. }
    选择器2{ ….. }
    。。。。。。。。
    </style>
    b) 只对当前网页有效:常见。
  3. 外部样式:
    a) css文件中:
    选择器1{ ….. }
    选择器2{ ….. }
    。。。。。。。。
    b) 网页文件中:
    <link rel="stylesheet" type="text/css" href="css文件路径url" />
    c) 对所有引入该css的网页有效:常见。

盒子深入

  • 盒子的尺寸构成:
    一个盒子的宽度构成:
    左外边距 + 左边框宽 + 左内边距 + width值 + 右内边距 + 右边框宽 + 右外边距
    一个盒子的高度构成:
    上外边距 + 上边框宽 + 上内边距 + height值 + 下内边距 + 下边框宽 + 下外边距

  • margin外边距细化:
    margin还可以细分为4个方向,每个方向都可以单独控制,如下:

margin-top:     上外边距
margin-right:   右。。。
margin-bottom:下。。。。
margin-left:    左。。。
margin其实是表示上述4个属性的一个“综合属性”:其实它代表的就是指“一下子设置了4个方向的margin”,其详细使用形式和含义如下:
margin: 一个值;        ——设置上,右,下,左4个方向均为该值;
    margin:值1  值2;  ——设置上下margin为值1,左右margin为值2;
    margin:5px  10px;   表示上下margin是5px,左右margin是10px
    margin:0 auto;      表示上下margin是0,左右margin是auto——auto对标准浏览器就解析为两边相等
margin:值1  值2  值3;——设置上margin为值1,左右margin为值2, 下margin为值3;
margin:值1  值2  值3  值4;——分别设置上,右,下,左4个方向的值;
  • border边框细化(20):
    边框指的是边框线。
    线有3个方面的特性:线型,线宽,线色,每个特性都可以单独控制。
    边框也有4个方向,每个方向都可以单独控制。
    于是:
    我们立即就有了12个对边框线的控制属性:

      border-top-style: 顶部边框的线型。常见线型:solid(实线) ,  dashed(虚线),  dotted(点线)
      border-top-width: 顶部边框的线宽;
      border-top-color: 顶部边框的线色;
      border-right-style,  border-right-width, border-right-color: 
    

。。。。。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
以上就是12个:
除此之外,我们还有3个设置线的某方面特性的综合属性:
border-style: 可以使用1-4个值,用来设置4个方向的线的线型,其规则同margin值的设置。
比如:border-style:solid dashed; 表示上下边框为实线,左右边框为虚线;
border-width: 同理,可以设置1-4个值,表示4个方向的线宽。
border-color:同理。
还有:4个设置每个方向边框的所有特性的综合属性:

border-top: 线型  线宽  线颜色;
border-right: 线型  线宽  线颜色;  
border-bottom: 线型  线宽  线颜色;
border-left: 线型  线宽  线颜色;

最后,一个最大的综合属性:一次性设置4个方向的3个特性:
border: 线型 线宽 线颜色;
盒子还有背景属性。

盒子背景:

背景分两种:
* 背景颜色:只能是纯色,全平铺——css3里面已经可以设置过度色。
background-color:颜色值;
* 背景图片:需要设置图片路径,还可以设置是否重复(平铺),怎么重复,怎么定位。

background-image:url(图片路径);
    background-repeat: repeat  //   no-repeat  //  repeat-x  //  repeat-y;
                    重复  //  不重复     // 仅x方向重复//仅y方向重复
    background-position: 水平定位方式  垂直定位方式;
        水平定位方式有: left  //  center  //  right  // 离左边的像素值;
        垂直定位方式有: top  //  center  //  bottom // 离顶部的像素值;
背景综合属性:可以一次性设置有关背景的多个数据值:

background:背景色值 背景图值 背景图重复性值 背景图定位值;
以上4个值,几乎可以任意省略(也就是任意使用其中某些)。

块盒子和行内盒子的真相

其实块盒子和行内盒子的所谓初始表现,并不是什么决定的东西,而只是一个属性的初始值问题:
对块盒子,其display属性的值默认是block
对行内盒子,其display属性的值默认是inline;

实际上,我们完全可以将html盒子的初始表现使用该属性来设置其其它值——即块盒子和行内盒子可以相互转换。

div{ display: inline;}      ——此时div就跟span一样。
span{ display: block;}  ——此时span就跟div一样。
display: inline // block  // none: 显示为:行内盒子//块盒子//不显示
相关文章
|
6月前
|
前端开发
玩转CSS盒子之 三角形盒子
玩转CSS盒子之 三角形盒子
57 0
|
前端开发
CSS新增样式----圆角边框、盒子阴影、文字阴影
CSS新增样式----圆角边框、盒子阴影、文字阴影
139 0
|
前端开发 容器
css中的弹性盒子和弹性布局
css中的弹性盒子和弹性布局
117 0
|
前端开发
初始化CSS样式
初始化CSS样式
|
21天前
|
前端开发 UED
如何使用css给一个盒子加上好看的hover阴影效果
如何使用css给一个盒子加上好看的hover阴影效果
58 1
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
|
30天前
|
前端开发 容器
CSS弹性盒子知识点
CSS弹性盒子知识点
|
4月前
|
前端开发 容器
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
28 3
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
|
5月前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
Css-弹性盒子
Css-弹性盒子
80 0