Bootstrap

CSS基础(3)

11.边框

边框颜色 border-color:#000

边框宽度 border-width:1px;

border-left 设置左边框,一般单独设置左边框样式使用

border-right 设置右边框,一般单独设置右边框样式使用

border-top 设置上边框,一般单独设置上边框样式使用

border-bottom 设置下边框,一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。

边框样式值如下:

none :  无边框。与任何指定的border-width值无关

hidden :  隐藏边框。IE不支持

dotted :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线(常用)

dashed :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线(常用)

solid :  实线边框(常用)

double :  双线边框。两条单线与其间隔的和等于指定的border-width值

groove :  根据border-color的值画3D凹槽

ridge :  根据border-color的值画菱形边框

inset :  根据border-color的值画3D凹边

outset :  根据border-color的值画3D凸边

复合方式

border:5px solid red;

12.盒子模型

每个·HTML元素都可以视为一个矩形盒子,这些盒子可以包含内容、内边距、边框和外边距

外边距margin、边框border、内边距padding、内容content四个属性

自身的身高 width height

内边距 padding

盒子边框 border

与其他盒子的距离 margin 外边距

1.border 边框

常见的写法 border:1px solid #foo;

单独属性:

border-widh:

border-style:

dotted 点状虚线

dashed(虚线)

solid(实线)

double(双实线)

border-color(颜色)

2.padding 属性设置或返回元素的内边距。

该属性可使用 1 到 4 种值:

如果规定一种值,比如:div {padding: 50px} - 所有四个内边距都是 50px。

如果规定两种值,比如:div {padding: 50px 10px} - 上内边距和下内边距是 50px,左内边距和右内边距是 10px。

如果规定三种值,比如:div {padding: 50px 10px 20px} - 上内边距是 50px,左内边距和右内边距是 10px,下内边距是 20px。

如果规定四种值,比如:div {padding: 50px 10px 20px 30px} - 上内边距是 50px,右内边距是 10px,下内边距是 20px,左内边距是 30px。

3.margin 外边距

值:与padding相同

单独属性:与padding相同

外边距合并:两个盒子同时设置了外边距,会进行一个外边距合并

margin:10px  上下左右都会腾出10px出来

margin:0px auto; 居中

4.content

元素的实际内容所在的区域,可以通过`width`和`height`属性设置其大小。

13.溢出

overflow 属性规定当内容溢出元素框时发生的事情。

visible 默认值。内容不会被修剪,会呈现在元素框之外。

hidden 内容会被修剪,并且其余内容是不可见的。

scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

inherit 规定应该从父元素继承 overflow 属性的值。

14.float  脱离文档流浮动

left  元素向左浮动。

right 元素向右浮动

清除浮动

clear: both;(/left/right)

关于浮动理解可参考大佬博客:

经验分享:CSS浮动(float,clear)通俗讲解 - 杨元 - 博客园 (cnblogs.com)icon-default.png?t=N7T8https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

15.定位

position

static静态定位(不对它的位置进行改变,在哪里就在那里) 

默认值。没有定位,元素出现在正常的流中(忽略 top,bottom, left, right 或者z-index 声明)。

fixed固定定位(参照物--浏览器窗口)---做 弹窗广告用到

生成固定定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right"以及 "bottom"属性进行规定。

relative(相对定位 )参照物以他本身

生成相对定位的元素,相对于其正常位置进行定位。

absolute(绝对定位)(除了static都可以,找到参照物-->与它最近的已经有定位的父元素进行定位)

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面(值越大越在上边)。

定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

16.总结

css先到这里,后续遇到不会的或者没见过的随时补充

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;