div的一些样式属性--第四天

CSS：

内部

<style> </style>

外部

<link href=”xxx.css” rel=”stylesheet” />

行内

style=””

格式：属性：值;......

选择器:

1标签  标签名{}

2 id    #id名{}     标签中需要定义id属性

3 类   .类名{}      标签中需要定义class=””

 

注意：

在一个标签中可以调用多个class 写法：class=” x1 x2 ”

盒子模型：DIV （独占一行）

注意：

1 它的效果需要里面的内容或者设定宽高把他撑开

 

外部填充： margin

margin-top

margin-left

margin-right

margin-bottom

 

语法： 距上一个元素的位置

1  margin 1px 2px 3px 4px  上右下左
2  直接用 margin-top和margin-left

3  margin y  x   ： margin 0 auto（自动居中）

 

内部填充：padding

语法：div与该div中元素的距离

padding-top

padding-left

padding-right

padding-bottom

 

补充：

想让div中的文字垂直居中：line-height:div的高度

想让div中的文字水平居中：text-align:center

文字换行：

word-wrap:break-word

自动显示滚动条：

overflow:auto

超出部分隐藏：

overflow:hidden

隐藏：

display:none

显现：

display:block

内联：下显示到一行 （宽和高根据内容而定，设定width和height无效）

display:inline

display:inline-block 内联：下显示到一行 （设定width和height有效果）

 

 

关于布局：

position只能搭配：top left right bottom

1 固定布局 相对于浏览器

position:fixed ：

 

2 绝对布局 相对于浏览器的元素

position:absolute

3 相对布局 相对于上一个相对定位的元素

position:relative

关于优先级：z-index  值越大优先级越大：

针对 position 所有布局

4 浮动布局 （相对的是上一个元素）

 float：left|right

清楚浮动：clear:both0