border居中（CSS样式中怎么让层居中啊）

CSS样式中让层居中,也就是说，让一个块级元素居中，我们需要给这个元素width和height，然后在通过margin来设置，margin的用法如图：

，在通过代码来理解下：

《html》

《head》

《style》

div{

width:300px;

height:30px;

border:1px solid #f00;

marign:0 auto;

}

《/head》

《body》

《div》

《p》我的位置《/p》

《/div》

《/body》

《/html》

原先的样式：

因为设置了边框导致不居中偏移

我发现，只要设置box-sizing:content-box之后，再调节一下宽度和高度等参数就好了

边框（border）

边框相关的三个样式

　　border-color 边框的颜色    border-color：#00ffcc;

　　border-style 边框的样式    border-style：dashed;

　　border-width 边框的宽度    border-width：30px;

边框会影响到盒子的可见框大小

border-width表示边框的宽度

　　- 可以通过该属性分别制定边框四个方向的宽度

　　border-width: 10px 20px 30px 40px;

　　如果指定了四个宽度，则会分别设置上右下左四个方向的边框的宽度

　　border-width: 10px 20px 30px;

　　三个值：上 左右 下

　　border-width: 10px 20px;

　　两个值：上下 左右

　　border-width: 10px;

　　一个值：上下左右

border-color边框的颜色，可以分别指定四个边的颜色，规则和border-width一样。

　　border-color: red orange blue aqua; 上右下左----顺时针旋转

　　border-color: silver;

border-style 指定边框的样式

　　solid 实线

　　dotted 点状虚线

　　dashed 虚线

　　double 双线

　　border-style: solid dotted dashed double;------顺时针旋转

　　border-style: solid dotted dashed ;--------------上左右下

　　border-style: solid dotted;------------------------上下左右

　　border-right: yellow solid ;

边框（border）

　　不指定宽度，默认宽度 一般3px

　　不指定颜色，默认使用字体颜色-随字体颜色变

　　边框可同时设置四个方向边框的宽度、颜色、样式，并且没有顺序要求

border:red 10px solid

　　除了border还有四个

　　border-top 上  border-right 右  border-bottom 下  border-left 左

内边距（padding）边框和内容区之间的距离叫做内边距

　　盒子的可见框大小由内容区，内边距和边框共同决定

　　四个方向的内边距

　　padding-top 上  padding-right 右  padding-bottom下  padding-left 左

　  通过padding来同时设置四个方向的内边距，规则和border-width一样

　　padding: 10px 20px 30px 40px;

　　padding: 10px 20px 30px ;

　　padding: 10px 20px  ;

　　padding: 10px  ;

外边框（margin）

　　当前盒子和其他盒子之间的距离，外边距不会影响盒子的可见框的大小，但是外边距会影响到盒子实际占地的大小，影响盒子的位置。

　　四个方向的外边距：

　　　　margin-top  margin-right  margin-bottom  margin-left

　　由于在浏览器中默认情况下，元素是靠左靠上排列的，所以设置上左外边距时，会移动元素自身，而设置下和右外边距时，会移动其他元素

　　外边距可以是负值，如果是负值则元素会向相反方向移动    margin-top: -50px;

　　同时设置四个方向的外边距margin: 10px 20px 30px 40px;

水平方向布局

　　子元素在父元素的位置是父元素的内容区

　　子元素在父元素中的水平方向的布局，必须满足如下等式

　　margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素的width（7个值和=父元素的宽度）

　　在水平方向，有三个值可以设置auto

　　　　分别是 margin-left width margin-right

　　设置为auto以后，浏览器会自动计算该属性的值

　　　　- 若七个值和相加不等于父元素宽度，则属于过度约束，则浏览器会自动调整右外边距的值

　　　　- 如果将margin-left 或 margin-right 的一侧设置为auto，则另一侧会设置尽量大的值

　　　　- 若left和right都设置auto，则会将两侧外边距设置相等的值，导致子元素在父元素中水平居中

垂直方向布局：（简单）

　　margin-top+border-top+padding-top+height+margin-bottom+border-bottom+padding-bottom=父元素高度

　　box1》box2:

　　width设置auto时，子元素会占满父元素

　　height设置auto时，父元素的高度由子元素内容决定

1. 当父元素写死时，子元素的高度高于父元素时，会溢出，溢出的子元素不会影响页面布局。

　　使用 overflow 来设置溢出内容的处理方式：

　　　　可选值：

　　　　visible，默认值 溢出内容不会被裁剪直接在父元素外部显示

　　　　hidden，溢出的内容会被裁剪，超过父元素的不会显示

　　　　scroll，生成滚动条，可以通过滚动条查看完整内容，滚动条一直在

　　　　auto，根据需要生成滚动条

2. 兄弟元素的外边距的折叠（margin）

.box1{

height:100px;

Width:100px;

Margin-bottom:100px;

}

.box2{

height:100px;

Width:100px;

Margin-top:100px;

}

　　外边距的折叠，垂直方向相邻的外边距，会发生外边距折叠现象。

　　兄弟元素间的相邻外边距，会去两个外边距间的最大值（正值）；如果是负值，取绝对值较大的。

　　两个外边距：相邻的外边距，谁大用谁的距离

　　一正一负：取两个值的和

3. 父子元素的外边距折叠

　　父子元素的相邻垂直外边距，子元素的外边距会传递给父元素

.box1{

width:200px;

heigth:300px;

background-color:#bfa;

border-top:1px red solid;

}

.box2{

width:200px;

heigth:300px;

background-color:orange;

margin-top:100px;

}

4. 文档流（常规流、标准流）

　　-文档流是网页中的一个位置，默认情况下页面中的所有元素都在文档流中排列

　　-块元素在文档流中的特点

自上向下进行排列（独占一行）

默认宽度和元素一样

默认高度被内容撑开

　　　　《div》  《/div》

　　-行内元素在文档流中的特点

自左向右水平排列，如果一行中不足以容纳所有元素则切换到下一行继续自左向右水平排列

默认高度和宽度都会被内容撑开

　　　　《span》  《/span》

5. 行内元素的盒模型

　　内联元素不支持设置宽度和高度《span》  《/span》

　　内联元素可以设置padding（border），但垂直方向padding（border）不会影响页面的布局

　　内联元素支持水平方向的外边距，不支持垂直方向的

6. display

　　-指定元素所产生的框的类型

　　-可选值：

　　　　inline行内元素

　　　　block块元素

　　　　inline-block行内块元素

　　　　　　-既有行内元素的特点，不会独占一行；又有块元素的特点，可设置宽高

　　　　none元素不在页面中显示

　　　　　　内联元素无法改变宽度和高度，将超链接变成块元素，就可以改变大小

　　　　display:block;

a{

width:200px;

height:200px;

background:#ofd;

dispaly:none;

}

.box1:hover a {  ////鼠标碰到连接时出现

display:block;///////////inline

}

7. visibility设置元素的显示状态

　　可选值：visible:默认值，元素正常显示

　　hidden不显示元素，但元素依旧占据位置

　　display:none :不显示元素，而且不占据位置

8. 二级菜单

　　当鼠标移动到xxx时，显示二级菜单

　　.outer》xxx:hover .inner{祖先与后代关系

　　　　display:block;}

9. 默认样式

为了确保网页在没有样式的情况下，也可以浏览，所以浏览器都会为网页设置一些默认样式，对开发者来说没有任何作用，并且不同的浏览器所设置的默认样式不同，开发中第一件事就是去除浏览器的默认样式。

*{margin:0;

padding:0;  去掉所有边框，外边界}

重点：CSS权威指南---利用reset.css直接引入，可以去除所有默认样式，推荐

normalize.css--统一

10. 块元素和行内元素一般情况下，只会在块中放内联元素，不会向内联元素放块元素

块元素：用于页面的布局            p：不能放任何块元素

行内元素：主要用于页面中选中文字  a：什么都能放，除了自己

11. .img-list

{height:190px;

width:470px;

background-color:#33ffss;

margin:auto;    //居中

list-style:none;  //去掉列表前面的样式}

.img-list img{

height:100%;

width:100%;}

《ul class=’img-list’》

《li》《a href=”#”》《img src=”img/1.jpg”》《/a》《/li》

《li》《a href=”#”》《img src=”img/2.jpg”》《/a》《/li》

《li》《a href=”#”》《img src=”img/3.jpg”》《/a》《/li》

《/ul》

12. 文本修饰text-decoration:none: 去除下划线

《style》

.nav {width:190px;

height:450px;

padding:10px 0;

margin:0 auto;

list-style:none;

background-color:white;}

.nav li {height:25px;

padding-left:18px;}

.nav li:hover{

background-color:gray;}

.nav li a{

font-size:18px;

text-decoration:none;

color:#333;}

.nav li a:hover{

color:red;}

《/style》

《ul class=’nav’》

《li》《a href=”#”》xxx《/a》《/li》

《li》《a href=”#”》xxx《/a》《a href=”#”》xxx《/a》《a href=”#”》xxx《/a》《/li》

《li》《a href=”#”》xxx《/a》《a href=”#”》xxx《/a》《a href=”#”》xxx《/a》《/li》

《/ul》

龙华大道1号 http://www.kinghill.cn/LongHuaDaDao1Hao/index.html

水平或者垂直居中单一的要求很好做到，我说几种自己总结的常用的水平且垂直居中的几种方法：第一种 借助inline-block的特点#d1{display:inline-block;width:500px;height:500px; border:1px solid red;text-align:center;}#d1:after{content:““;display:inline-block;height:100%;vertical-align:middle;background:#000;}#d2{display:inline-block;width:200px;height:200px; border:1px solid red;vertical-align:middle;}《div id=“d1“》《div id=“d2“》《/div》《/div》第二种 利用css的transform 好用但是兼容性不好，IE10+以及其他现代浏览器才支持（手机开发可忽略）.box{width:300px;height:300px;border:1px solid red;position:relative;}.content{position:absolute;width:100px;height:100px;border:1px solid red;margin:0 auto;top:50%;left:50%;/* transform:translateY(-50%); 仅垂直居中*//* transform:translateX(-50%); 仅水平居中*/transform: translate(-50%, -50%); /* 若父容器下只有一个元素，且父元素设置了高度，则只需要使用相对定位即可 父元素{height:xxx;}.子元素 {position: relative;top: 50%;transform: translateY(-50%);}*/}《div class=“box“》《div class=“content“》《/div》《/div》第三种：绝对定位之后的偏移.box{border:1px solid red;width:300px;height:300px;position:relative;}.content{border:1px solid red;width: 200px; height: 200px;position: absolute; left: 50%; top: 50%;margin-top: -100px; /* 高度的一半 */margin-left: -100px; /* 宽度的一半 */}《div class=“box“》《div class=“content“》《/div》《/div》第四种：定位之后的margin： auto.box{border:1px solid red;width:300px;height:300px;position:relative;}.content{width: 200px; height: 200px;position: absolute; left: 0; top: 0; right: 0; bottom: 0;margin: auto;border:1px solid red;}《div class=“box“》《div class=“content“》《/div》《/div》第五种 flex布局《div style=“display:flex; display: -webkit-flex; justify-content:center;align-items:center;width: 300px; height: 300px;border:1px solid red;“》《div style=“width: 200px; height: 200px;border:1px solid red;“》《/div》《/div》第六种利用display:table-cell的vertical-align属性 子元素加上“display:inline-block;”可水平居中《div style=“display:table-cell;vertical-align:middle;text-align:center;width:300px;height:300px;border:1px solid red;“》《div style=“border:1px solid red;width:200px;height:200px;display:inline-block;“》《/div》《/div》第七种 使用css3中的display：-webkit-box的用法这种方法还没有得到浏览器的普遍支持，如有兴趣，自行学习

style=“ border:5px #990066 inset;“ 这样设置就可以了 边框大小、颜色自己改。

你把你《body》 《/body》里的那堆东西放到一个 div里，让div 居中，所有的表单项不就居中了

文字左右加相同的padding值，即padding-left padding-right

1 .css属性是为了显示图文。 2 .边框设计的初衷可能是为了白底的图片和外面区分，所以加一个1px的边框就能看清 3 .边框一般不需要跟随设备变大而变大。 4 .所以其他属性outline,box-shadow,text-shadow也是这来原因而决定的.

1 .1px 2 .thin:1px 3 .medium:3px，默认值。主要是因为border-style:double。至少需要3px才生效 4 .thick:4px

1 .none:所以单纯设置border-width,border-color没有边框显示的原因. 1.5px solid #000 .默认样式是这样

2 .solid:实线

3 .dashed:虚线 :颜色区和透明区的比例所占的不一样，chrome是2:1，IE,火狐是3:1

4 .dotted:圆点边框

5 .double:双线板框。线框的表现还和宽度有关系，宽度不同最后的表现也不一样

6 .其他：inset（内凹）,out（外凹），沟槽（groove），ridge(山脊)

1 .border-color默认颜色是color色值，如果没有指定边框颜色，就会使用color的颜色,outline,,box-shadow,text-shadow也是这样

1 .右下方background定位技巧.background定位的一个局限是只能根据左上角定位，而不能相对右下角.一个宽度不固定的元素，我们需要在距离右边缘50像素的位置设置一个背景图片

2 .增加点击区域大小：通过使用透明边框可以增加点击区域的大小 border:50px solid transparent;

3 .三角形绘制

1 .背景图片相对于background-image属性的位置 2 .border-box 3 .content-box 4 .padding-box

1 .center:居中图片 2 .top.left

1 .上面构造出来的全等三角形，其实是由两个直角三角形拼接成的。 2 .所以如果设置某一条边的宽度是0，就可以只显示左边的，实现一个直角三角形

#div{width:600px; height:300px; line-height:26px; margin:100px auto 0; border:1px solid #000; padding:5px;}《div class=“div“》  就是加了一个边框，想要边框的部分居中，但是边框中的内容是左对齐形式《/div》

 《!-- CSS样式里默认字体是靠左对齐的 所以text-align:left; 这句可以忽略不写  --》

代码如下：

《!doctype html》

《html》

《head》

《meta charset=“utf-8“》

《title》无标题文档《/title》

《style》

.my-para{

height:30px;

line-height:30px;

width:400px;

display:flex;

text-align:center;

}

.my-para span{

height:1px;

width:200px;

border-bottom:1px solid #333;

margin:auto;

display:inline-block;

}

《/style》

《/head》

《body》

《p class=“my-para“》新闻标题文字《span》《/span》2017.12.12《/p》

《/body》

《/html》

如图所示：

解释：垂直居中的直线可以设置为《span》《/span》,span标签的父元素p标签的css属性设置为：display:flex;text-align:center;  设置span为块级元素，给它宽、高、下边框。  span标签的属性设置为：margin:auto;  这样就可以使span的下边框垂直居中与父级元素p