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 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。