css -内外边距-盒子模型-列表-表单-表格-常用文本属性-溢出

Web-css

1.地址：绝对，相对

图片，链接，css

2.内外边距：

2.1margin：外部盒子与盒子，外边距

2.2padding：盒子和物体，那边距

2.3Border:边框

2.4content:盒子内容，文本与图片

2.5塌陷问题：只会出现在垂直方向！

兄弟塌陷：如果上下两个元素都有设置相对的margin值, 则选择大的添加, 小的不添加.同级

父子塌陷：如果父级 div 中没有 border,   padding,   inline content(文本), 子级 div 的 margin 会一直往上找,直到找到某个标签包括 border,  padding,   inline content(文本) 中的其中一个, 然后按此 div 进行 margin.

   

  

  

2.6 padding 三种写法：4个为顺时针

padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ 上（左右）下

padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/  （上下）（左右）

padding：20px; /* 设置四边内边距为20px */ 四周

2.7margin 与padding相同

外间距居中技巧 

如果子元素是块元素，且它的宽度小于父元素，可以将子元素左右设置auto来水平居中子元素

/* 子元素上下外边距设为0，左右设置为auto */

margin:0px auto;

3.盒子模型： 

3.1 盒子：把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

一般所说的设置宽高指的是内容：

也就是说设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点)；设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点)

4.列表：标签

4.1无序:

一般应用在布局中的新闻标题列表和文章标题列表以及菜单

 写法：   ul>li{列表标题}*3.   

ul>(li>a[href=#]{列表标题 $})*3  一般是超链接

4.2 有序列表：

写法:        ol>li{列表标题}*3

5.表单：form

5.1 属性：

action

method： get port

5.2 表单标签

label：文字标注

    注：for属性可以和input中id属性一致，可以点击label触发input focus效果。

input：

type属性：文本框text，密码框password，单选框radio，checkbox复选框，file上传文件，submit提交表单，reset重置表单，button普通按钮。

value属性：表单值

name：表单元素名称，一般提交表单时键名

textarea：多行文本 输入框

placeholder：默认提示信息

cols 列数。  rows行数

select>option*n:下拉表单组合

6.表格：

Table  表格标签—Tr行标签—Td列标签—Th列中标题标签

Cols 列合并，水平 rows 行合并，垂直。

• border-collapse 设置表格的边线合并，

如：border-collapse:collapse;

• border='1'  可以设置table的边框大小

• text-align  可以设置对齐方式:  left  right  center

7.css 进阶

7.1文本属性：

text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中

text-indent 设置文字首行缩进，如：text-indent:32px; 设置文字首行缩进32px

7.2display属性：设置元素类型及隐藏

• none   元素隐藏且不占位置

• block  此元素会被显示为块元素， 若无内容，也为隐藏

• inline 此元素会被显示为内联元素，若无内容，相当于隐藏

• inline-block 行内块元素 ( 了解 )

7.2.font属性补充： 

7.3.css溢出

Overflow：

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

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

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

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