Web前端篇：CSS经常使用格式化排版、盒模型、浮动、定位、背景边框属性

时间 2019-12-08

标签 web 前端 css 经常使用格式化排版模型浮动定位背景边框属性栏目 HTML 繁體版

原文原文链接

目录css

Web前端篇：CSS经常使用格式化排版、盒模型、浮动、定位、背景边框属性

Web前端篇：CSS经常使用格式化排版、盒模型、浮动、定位、背景边框属性

1.经常使用格式化排版

1.字体的属性

设置字体属性：html

body{font-family:"Microsoft Yahei"}

body{font-family:"Microsoft Yahei","宋体","黑体"}
#备选字体能够有无数个，那么浏览器在去解析这个代码的时候，是从左往右解析的，若是没有微软雅黑，再去找宋体，最后黑体。

字体大小：前端
- 最经常使用的像素单位：px、em、rem，这里我们先介绍一种单位，px。
- px:像素是指由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。
字体颜色：css3
- 颜色表示方法在css中有三种方式：
  - 英文单词表示法：red/green/blue
  - rgb表示法
  - 十六进制表示法

字体样式font-styleweb

网站中的字体分为了普通字体和斜体字体，咱们可使用font-style属性来设置对应的字体样式。浏览器

normal正常,italic斜体,oblique斜体服务器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-style:italic;
        }
    </style>
</head>
<body>
    <p>你好</p>

</body>
</html>

字体粗细网络

font-weight布局

属性值	描述
normal	普通的字体粗细，默认
bold	加粗的字体粗细
lighter	比普通字体更细的字体
bolder	比bold更粗的字体
100~900	400表示normal

文本属性：性能

text-decoration

属性值	描述
none	无文本的修饰
underline	文本下划线
overline	文本上划线
line-through	穿过文本的线，~~能够模拟删除线~~。

文本缩进
- 咱们一般写文章的时候，首字母要空两格。那么咱们须要使用
- text-indent,它的属性值是像素(px、em、rem)单位。
行间距
line-height:数值px/em
纵纹字间距/字母间距
- letter-spacing:数值px;
- word-spacing:数值px;

文本对齐

text-align

属性值	描述
left	文本左对齐，默认
right	文本右对齐
center	中心对齐

2.px,em,rem

px单位的名称为像素，它是一个固定大小的单元，像素的计算是针对（电脑/手机）屏幕的，一个像素（1px）就是（电脑/手机）屏幕上的一个点，即屏幕分辨率的最小分割。
它是相对于当前对象内文本的字体尺寸；若是没有人为设置当前对象内文本的字体尺寸，那么它相对的是浏览器默认的字体尺寸

rem只相对于根目录，即HTML元素。因此只要在html标签上设置字体大小，文档中的字体大小都会以此为参照标准，通常用于自适应布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        html{
            font-size:20px
        }
        .box{
            font-size:12px;
            width:20rem;
            height:20rem;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.CSS盒模型

经常使用块元素由：
```
p,h1-h6,div,ul,ol,tr,li,form
```
经常使用内联元素由：
```
a,span,em,i,strong,u,
```
常见的内联块元素
```
input img
```

标签类别	特色
块状元素	1.独自占据整一行 2.能够设置宽高
内联元素	1.全部的内联元素在一行内显示 2.不能够设置宽高
行内块元素	1.在一行内显示 2.能够设置宽高

盒模型经常使用属性：
- 盒子模型中有四个属性：内容的宽高、内边距、外边距、边框。

1.padding

padding有四个方向，分别描述四个方向的padding。

padding-top:10px;
padding-right:3px;
padding-bottom:50px;
padding-left:70px;

综合属性，多个属性用空格隔开。

/*上 右 下 左 四个方向*/
padding: 20px 30px 40px 50px ;
/*上 左右  下*/
padding: 20px 30px 40px;
/* 上下 左右*/
padding: 20px 30px;
/*上下左右*/
padding: 20px;

2.border

盒子模型的边框，在样式表中称为border。咱们知道呢，咱们用的手机，都会有手机壳。手机壳的样式、颜色、薄厚程度等都是这个壳的形态。一样呢，盒模型的边框也有三要素：粗细线性样式颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border的使用</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            /*1像素实线且红色的边框*/
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

按照三要素书写border

border-width:3px;
border-style:solid;
border-color:red;
/*上面三句代码至关于一句代码：border:3px solid red;*/
/*一样,也能够分别设置边框四个方向的粗细 线性样式 颜色,跟padding的四个方向同样。*/
/*上下5px  左右10px*/
border-width:5px 10px;
/*上：实现  右：点状  下：双线 左：虚线*/
border-style: solid dotted double dashed;
/*上：红色 左右：绿色 下：黄色*/
border-color: red green yellow;

按照方向划分

border-top-width: 10px;
border-top-color: red;
border-top-style: solid;
border-right-width: 10px;
border-right-color: red;
border-right-style: solid;
border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;
border-left-width: 10px;
border-left-color: red;
border-left-style:solid;

至关于border:10px solid red;

清除默认边框：border:none;或者border:0; outline:none;

3.margin

在盒子模型中称为外边距，样式表中叫margin。表示盒子到另外一个盒子的距离。既然是二者之间的距离，那么就会产生水平之间的距离和垂直之间的距离。一样状况下，外边距也有四个方向，跟padding相似。

水平方向的外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平方向外边距</title>
    <style type="text/css">
        span:nth-child(1){
            background-color: green;
            margin-right: 20px;
        }
        span:nth-child(2){
            background-color: red;
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <span class="box_l">左盒子</span><span class="box_r">右盒子</span>
</body>
</html>
#nth-child(1)，获取span子类，参数为第1个。

垂直方向外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;

        }
        #box1{
            background-color: red;
            margin-bottom: 30px;
        }
        #box2{
            background-color: black;
            margin-top: 100px
        }
        #box3{
            background-color: yellowgreen;
        }
        #box3 p{
            background-color: goldenrod;
            margin-top: 30px;
        }
    </style>
</head>
<body>
<!-- margin 在垂直方向上会出现外边距合并现象，塌陷。以设置的最大的magrin距离为基准-->
  <div id="box1"></div>
    <div id="box2"></div>

注意：盒模型的外边距水平方向上不会出现问题，在垂直方向上会出现“**外边距合并**”的现象。

什么是外边距合并呢？在有些文献中说这种现象叫塌陷问题。只有在垂直方向上，当两个同级的盒子，在垂直方向上设置了margin以后，那么以较大者为准。

在网页排版中，外边距合并的问题也会时常出现，咱们如何避免出现这种问题呢？

很简单，咱们若是想让上下的两个盒子中间有间距，只须要设置一个盒子的一个方向便可。不必去碰触外边距塌陷的问题，还得找解决问题的方法，得不偿失。

3.浮动

浮动是网页布局中很是重要的一个属性。那么浮动这个属性一开始设计的初衷是为了网页的文字环绕效果。

文字环绕现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平方向外边距</title>
    <style type="text/css">
        html{
            font-size:24px;
        }
        img{
            width:20rem;
        }
        #sep{
            float: left;
        }
        p{
            border:1px solid red;
            text-indent:2rem;
            font-size:1rem;
        }
    </style>
</head>
<body>
    <div id="sep">
        <img src="https://i1.mifile.cn/a4/xmad_15590487108559_JOpcA.jpg" alt="加载失败" title="王源">
    </div>
    <p>
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
    </p>
</body>
</html>

1.浮动属性

css样式表中用float来表示，它有

属性值	描述
none	表示不浮动，全部以前讲解的HTML标签默认不浮动
left	左浮动
right	右浮动
inherit	继承父元素的浮动属性

<meta charset="UTF-8"/>
    <title>浮动属性用法</title>
    <style type="text/css">
        .left{
            width: 200px;
            height: 200px;
            background-color: red;
            color: #fff;
            /*左浮动*/
             float:left;
        }
        .right{
            width: 200px;
            height: 200px;
            background-color: green;
            color: #fff;
            /*右浮动*/
             float:right;
        }
    </style>
    <div class="left">左边的盒子</div>
    <div class="right">右边的盒子</div>

2.浮动现象

咱们以前说浮动的设计初衷是为了作”文字环绕效果“。那么咱们就来看一下若是对盒子设置了浮动，会产生什么现象？
1浮动的元素脱离了标准文档流，即脱标
2浮动的元素互相贴靠
3浮动的元素会产生”字围“效果
4浮动元素有收缩效果

3.浮动的破坏性

浮动以后效果展现：
因而可知，浮动以后，盒子由于脱离了标准文档流，它撑不起父盒子的高度，致使父盒子高度塌陷。若是网页中出现了这种问题，会致使咱们整个网页的布局紊乱。咱们必定要去解决这种父盒子高度塌陷的问题。
那么如何解决浮动给网页带来的问题？

4.清除浮动的方式

咱们知道浮动具备破坏性，它能使父盒子高度塌陷、致使页面紊乱。那么在css布局中对于浮动的解决方案有四种：

1.父盒子设置固定高度

给父盒子设置固定高度，缺点不灵活，后期不易维护。应用领域导航栏。

2.内墙法

在浮动元素的后面加一个空的块级元素(一般是div),而且该元素设置clear:both属性。
clear属性，字面意思就是清除，那么both,就是清除浮动元素对我左右两边的影响。以下示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 800px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        .child1{
            width: 200px;
            height: 400px;
            background-color: red;
            float: left;
        }
        .child2{
            width: 300px;
            height: 200px;
            background-color: green;
            float: right;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
<!--内墙法：给最后一个浮动元素的
后面添加一个空的块级标签，而且设
置该标签的属性为clear:both;-->
    <div class="father">
        <div class="child1">A盒子</div>
        <div class="child2">B盒子</div>
        <div class="clear"></div>

    </div>

存在问题：冗余过长。

3.伪元素清除法（推荐使用）

伪元素选择器很简单。就像伪类同样，让伪元素添加了选择器，但不是描述特殊的状态，他们容许您为元素的某些部分设置样式。在这里只介绍一个。

语法：

p::after{
    /*p::after{}必定要有content。表示在p元素内部的最后面的添加内容*/
    content:'...'
}

示例：

...
 .clearfix::after{
            content:'';
            display: block;
            clear: both;
            /*visibility: hidden;*/
            /*height: 0;*/
        }

    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="child1">盒子A</div>
        <div class="child2">盒子B</div>

    </div>

4.overflow:hidden

CSS属性overflow定义一个元素的内容太大而没法适应盒子的时候该作什么。它是overflow-x和overflow-y的简写属性

属性值	描述
visible	默认值。内容不会被修剪，会呈如今元素框以外
hidden	内容会被修剪，而且其他内容不可见
scroll	内容会被修剪，浏览器会显示滚动条以便查看其他内容
auto	由浏览器定夺，若是内容被修剪，就会显示滚动条
inherit	规定从父元素继承overflow属性的值

hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            overflow: hidden;
        }
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            overflow: hidden;

        }
    </style>
</head>
<body>
    <div class="box">
    此处有一篇1万字文章
    </div>
</body>
</html>
#注意：此处内容会被修建，而且其他内容不可见

overflow:hidden||auto|scroll属性以后，它会造成一个BFC区域，咱们叫作它为块级格式化上下文。BFC只是一个规则。它对浮动定位都很重要。浮动定位和清除浮动只会应用于同一个BFC的元素。
浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 800px;
            margin: 100px auto;
            border: 1px solid #000;
            /*一旦设置一个Box盒子 除了overflow：visible；
            它会造成一个BFC,BFC它有布局规则： 它会让内部浮动元素计算高度*/
            overflow: hidden;
        }
        .child1{
            width: 200px;
            height: 400px;
            background-color: red;
            float: left;
        }
        .child2{
            width: 300px;
            height: 200px;
            background-color: green;
            /*float: right;*/
            /*overflow: hidden;*/
            float: left;
        }


    </style>
</head>
<body>

    <div class="father ">
        <div class="child1">A盒子</div>
        <div class="child2">B盒子</div>
    </div>



</body>
</html>

5.深刻理解BFC：

了解BFC
- （1）B: BOX即盒子，页面的基本构成元素。分为 inline 、 block 和 inline-block三种类型的BOX
  
  （2）FC: Formatting Context是W3C的规范中的一种概念。它是页面中的一块渲染区域，而且有一套渲染规则，它决定了其子元素将如何定位，以及和其余元素的关系和相互做用。
  
  （3）常见的 Formatting Context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)

1.BFC布局：

1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每一个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，不然相反)。即便存在浮动也是如此。
4.BFC的区域不会与float 元素重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时，浮动元素也参与计算

2.哪那些元素会生成BFC

1.根元素
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block
5.overflow不为visible

3.display属性

display属性设置元素如何显示

值	描述
none	此元素不会被显示
block	此元素将显示为块级元素，此元素先后会带有换行
inline	默认，此元素会被显示为内联元素，元素先后没有换行
inline-block	行内块，将元素显示为行内块元素，设置属性后，其余的行内块级元素会排在同一行。
table-cell	此元素会做为一个表格单元格显示

4.定位

定位是一个至关复杂的话题，在去深刻理解定位以前，咱们先来聊一下以前咱们的标准文档流下的布局。
应用:网页中小广告，返回顶部的UI。

1.Position属性

定位方式：top,right,bottom,left属性决定该元素的最终位置。

属性值	描述
static	默认。静态定位，指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 `top`, `right`, `bottom`, `left` 和 `z-index`属性无效。
relative	相对定位。元素先放置在未添加定位时的位置，在不改变页面布局的前提下调整元素位置（所以会在此元素未添加定位时所在位置留下空白）
absolute	绝对定位。不为元素预留空间，经过指定元素相对于最近的非 static 定位祖先元素的偏移，来肯定元素位置。绝对定位的元素能够设置外边距（margins），且不会与其余边距合并
fixed	固定定位。不为元素预留空间，而是经过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变

2.静态定位

静态定位意味着“元素默认显示文档流的位置”。没有任何变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态定位</title>
    <style type="text/css">
        .positioned{
            position: static;
            background-color: red;
        }
    </style>
</head>
<body>
    <p class="positioned">我是静态定位的元素</p>
</body>
</html>

3.相对定位

相对定位的元素是在文档中的正常位置的偏移，可是不会影响其余元素的偏移。
参考点：以自身原来的位置进行定位，可使用top,left,right,bottom对元素进行偏移。
现象：
- 不脱离标准文档流，单独设置盒子相对定位以后，。不用top,left,right,bottom对元素进行偏移，那么与普通的盒子没什么区别。
- 有压盖现象。用top,left,right,bottom对元素进行偏移以后，明显定位的元素的层级高于没有定位的元素(用top,left,right,bottom层级低)。

4.绝对定位

相对定位的元素并无脱离标准文档流，而绝对定位的元素则脱离了文档流。在标准文档流中，若是一个盒子设置了绝对定位，那么该元素不占据空间。而且绝对定位元素相对于最近的非static祖先元素定位。当这样的祖先元素不存在时，则相对于根元素页面的左上角进行定位。
参考点：
- 相对于最近的非static祖先元素定位，若是没有非static祖先元素，那么以页面左上角进行定位。

5.应用

相对定位的盒子，通常用于“子绝父相”，布局模式参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 400px;
            height: 500px;
            background-color:red;
            position: relative;
        }
        div .c1{
            width: 200px;
            height: 200px;
            background-color:blue;
            position: absolute;
            top: 20px;
            left: 20px;
        }
        div .c2{
            width: 100px;
            height: 100px;
            background-color:greenyellow;
            position: absolute;
            top: 20px;
            left: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="c1">子1</div>
        <div class="c2">子2</div>

    </div>
</body>
</html>

子绝父相

6.z-index:

z-index有如下几个规则：
- z-index只应用在定位元素，默认z-index:auto;
- z-index取值为整数，数值越大，它的层级越高。
- 若是元素设置了定位，没有设置z-index,那么谁写在后面的表示谁层级越高。
- 从父现象，一般布局方案咱们采用子绝父相，比较的是父元素的z-index值，哪一个父元素的z-index值越大，表示子元素的层级越高。

5.背景属性和边框属性

背景属性值

属性值	属性值	描述
background-color	d单侧颜色法，RGB，十六进制	s设置元素的背景颜色
background-image	url("wy.png")	给一个元素设置一个或多个背景图像
background-position	top,left,center,百分比，px	为每个背景图片设置初始位置
background-repreat	repeat-x	repeat-y

background-image设置背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg{
            width: 400px;
            height: 400px;
            border:1px solid blue;
            background-image:url("wy.jpg")
        }
    </style>
</head>
<body>
    <div class="bg"></div>
</body>
</html>

background-repeat背景图像

属性值：

数值值	描述
repeat	默认值。表示背景图水平和垂直方向都平铺
no-repeat	表示背景图水平和处置方向都不平铺
repeat-x	表示背景图只有水平方向上平铺
repeat-y	表示背景图只有垂直方向上平铺

.bg{
    width: 1000px;
    height: 1000px;
    border:1px solid blue;
    background-image:url("sj6.jpg");
    background-repeat:repeat-x;/*沿着轴方向平铺*/
}

bacground-position背景图定位

语法：

background-position:x y;
background-position:position position

取值

关键字取值：
    top ,right,bottom,left,center
长度值取值：
    px,em
百分比：
    50%

示例

background-position:0 0;
/*左上角显示*/

background-position:top right; /*背景图像在右上角*/

background-position:top center; /*背景图像上方居中显示*/

background-position:center center;/*背景图像居中显示*/

设置长度单位：

background-position:50px 100px;

设置为负值：

background-position:-20px -30px;

2.雪碧图

CSS雪碧图技术：即CSS Sprite,也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，而后利用css的背景定位来显示须要显示的图片部分。

优势：
- 有效的减小HTTP请求数量
- 加速内容
雪碧图的实现原理
- 它经过css的背景属性的backrground-position的来控制雪碧图的显示。
- 控制一个层，可显示的区域范围大消息，经过一个窗口，进行背景图的移动。

3.border-radius

传统的圆角生成方案，必须使用多张图片做为背景图案。css3的出现，使得咱们不再必浪费时间去制做这些图片，而且还有其余多个优势：
- 减小维护的工做量。图片文件的生成、更新、编写网页代码，这些工做都再也不须要了。
- 提升网页性能。因为没必要再发出多条的HTTP请求，网页的载入速度将变快
- 增长视觉可靠性。（网络拥堵、服务器出错、网速过慢等等），背景图片会下载失败，致使视觉效果不佳。CSS3就不会发生这种状况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bor-radius{
            width: 400px;
            height: 400px;
            border-radius:20px;
            background-color: red;
    }
    </style>

</head>
<body>
    <div class="bor-radius"></div>
</body>
</html>

显示效果以下：
单角设置：
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
- 示例：
```
border-bottom-left-radius：
```

border-radius效果实现一个无边框圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cicle{
            width: 200px;
            height: 200px;
            background-color: red;
            border-radius:50%;
        }
    </style>

</head>
<body>
    <div class="cicle"></div>
</body>
</html>

制做一半的圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cicle{
            width: 200px;
            height: 100px;
            background-color: red;
            border-top-left-radius: 100px;
            border-top-right-radius: 100px;
        }
    </style>

</head>
<body>
    <div class="cicle"></div>
</body>
</html>

4.盒子阴影

经过box-shadow属性设置元素的阴影

语法：

box-shadow: h-shadow v-shadow blur color inset;

值	描述
h-shadow	必需。水平阴影的位置。容许负值
v-shadow	必需。垂直阴影的位置。容许负值。
blur	可选。模糊距离。
color	可选。阴影的颜色。
inset	可选。将外部阴影 (outset) 改成内部阴影。

.bg{
            width: 400px;
            height: 400px;
            border:1px solid blue;
            background-image:url("sj6.jpg");
            background-repeat:no-repeat;
            background-position:50px 100px;
            box-shadow:5px 5px 20px red;
        }

6.网页中规范和错误问题

css命名规范：

参考连接http://www.divcss5.com/jiqiao/j4.shtml#no2
项目目录规范：
肯定错误位置
- 假如错误影响了总体布局，则能够逐个删除div块，直到删除某个div块后显示恢复正常，便可肯定错误发生的位置。这样咱们能够更精准的找到错误点，进行排错。
是否重设了默认的样式?
- 制做网页时，咱们要清除掉默认的元素的padding和margin，使得咱们更易去计算盒模型的大小。

7.显示方式

1.行内元素水平居中显示

经过line-hinght + text-align

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            width: 200px;
            height: 200px;
            background-color: #666;
            color:red;
            line-height: 200px;
            text-align:center;
        }
    </style>

</head>
<body>
    <p>
        帅气的阿凯哥
    </p>
</body>
</html>

经过给父元素设置display:table-cell,而且设置vertical-align:middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            width: 200px;
            height: 200px;
            background-color: #666;
            color:red;
            text-align:center;
            display: table-cell;
            vertical-align:middle;
        }
    </style>

</head>
<body>
    <span>
        <span>你好啊</span>
    </span>
</body>
</html>

2.块级元素水平垂直居中

第一种：position+margin

position,子绝父相，margin自动设置外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
        }
        .child{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: blue;
            margin:auto;
            top:0;
            left:0;
            bottom:0;
            right:0;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child">居中盒子</div>
    </div>
</body>
</html>

第二种：display:table-cell

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 200px;
            height: 200px;
            background-color: red;
            display:table-cell;
            vertical-align:middle;
            text-align:center;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: green;
            display:inline-block;
            vertical-align:middle;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child">居中盒子</div>
    </div>
</body>
</html>

第三种：position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .father{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child">我是个居中的盒子</div>
    </div>
</body>
</html>