前端学习笔记(三)

 样式初始化+元素类型

一.样式初始化

浏览器对标签默认属性有默认值,但不同浏览器默认值不一定相同;为使页面和代码兼容性,需要对一些标签进行样式初始化.

*{

margin:0;
padding:0;
}/* *通配符选择器 也是选择器的一种表示 选择页面中所有的元素*/
*通配符选择器的利弊
浪费性能,每个标签多执行8次!
多元素选择器多个选择器组合起来使用
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
ol,ul{margin:0;padding:0;list-style:none;}
a{text-decoration:none;}
img{border:0;}

二.元素类型的转换

元素的类型通常分为 块级元素 内联元素 内联块元素

    1.块级元素

定义:块级元素会占据一行的位置,它后面的元素内容会换行显示

块级元素里面可以放任何内容,主要用来布局。

默认占据一行
自动换行
支持添加宽度高度
支持margin
支持padding
常见的块级元素:
div
p
ul li
dl dd
h1 h6
hr
pre
table

    2.行内元素

定义:内联元素也叫行级元素.它只占据他内容所占的位置,其它的
内容在他后面显示,但是 行级元素里面不能放块级元素
不自动换行
不支持宽高
margin上下无效 左右有效
padding上下无效 左右有效
padding只对自身有效
元素类型互相转换呢?
用到display属性:
none
block
inline

    3.内联块元素

span{
/*以行内元素形式排列,以块级元素形式显示*/
display:inline-block;
}

1.不换行 横排显示(会解析空格)

2.支持宽高,不给宽高的时候,内容撑开,不给内容的时候是0.0
3.给宽高的时候,占据宽高的位置,不给的时候,占据内容的位置,没内容的时候,不占据
位置
4.支持margin padding 不支持margin auto

    4.元素嵌套规则

1 块级元素可以套任意内容 p 标签里面不能套块级 包括其自身 h标签 dt 标签不建议套块级
2 行内不能套块级 a标签不能套a a可以套块级 但是最好是块级套a 然后把a转化成块级元素
3 行内块可以套任意,但是内联元素不管变成什么样子,都不要套块级。

    5.外边距合并

垂直相遇的两个盒子会出现外边距合并的情况
包含关系的margin合并的问题
解决原理:
不让他们相遇 加padding 或者 border

前端学习笔记(二)

列表标签和DIV盒子模型

一.层叠样式表概念

样式 = 选择器 + 申明

所有申明都要用{}大括号包裹,

每条申明 都由    属性和值组成 属性使固定的 值是可变的;并且有的属性可以由多个值; 每条属性由;分号隔开.

写样式时要 换行写; 每条申明结束要换行; 遵循从上往下 从外向内的顺序写样式; 样式可视性好,直观;可维护性很重要.

二.三种列表标签

    1.无序列表标签

ul li标签组合; 必须成对出现,父子关系;

ul下面只能放li标签;

li标签下面可以放任意元素,除了自己.

行内样式type 外部样式list-style-type

none:没有文字点的点; disc:实心圆点; circle:空心圆; queare:方块符号.

    2.有序列表标签

ol li标签组合;必须成对出现,父子关系

行内样式type( 1[默认],A,a,I,i )

外部样式 list-style-type:decimal (1.  2. 3. 4. )

upper-alpha (A. B. C. D. )

lower-alpha (a. b. c. d.)

upper-roman (I. II. III. IIII. )

lower-roman (i. ii. iii. iiii. )

    3.自定义列表标签

dl dt dd配套使用

dl 父     dt 列表名    dd列表项 子

一个dt    一个dd

一个dt    多个dd

多个dt    一个dd

多个dt    多个dd

三.div盒子模型

div标签通常被称为盒子,(严格来讲所有的标签都是盒子,div比较典型);网页中div被大量使用.

是一个通用的留内容容器;

里面可以放任意元素,用来布局网页或者给元素分组;

    1.边框

是一个用于设置各种单独边界的属性.

border:1px solid red;( 这三个值对应:边框大小 边框风格 边框颜色 ).

border-top:1px solid red; ( 单独设置一条边框线 上边框线).

其中:

border-top-width: 5px; 上边框线的宽度5px;

border-top-style: solid; 上边框风格为实线;

border-top-color: red; 上边框线颜色为红色;

border-type:

none    无边框线 (默认)

solid    实线

dashed    虚线

dotted    点状线

double    双线

groove    3D 凹槽

ridge    3D 垄状

inset    3D insert边框

outset    3D outset边框

颜色:

颜色的标准英文关键词:red blue yellow orange pink;

十六进制颜色 #开头    前两个值代表红色 中间两个代表绿色 后两个值代表蓝色

两个值相同可简写成一个字母,如:#aa00ff 可以写成#a0f

    2.外边距 margin

移动盒子位置用maigin

maigin属性为给定元素设置所有四个(上右下左)方向的外边距属性.

可简写成maigin:100px;

四个外边距属性:margin-top    margin-right    margin-bottom    margin-left;(值允许负值)

百分比: 是根据父元素的宽高来自动设置;

如:maigin:50%;

复合式写法

div{

margin:100px; /*上下左右*/

margin:100px 100px;    /*上下    左右*/

margin:100px 200px 300px;    /*上    左右    下*/

margin:100px 200px 300px 400px;    /*上    右    下    左 (顺时针)*/

}

    3.内边距

padding属性设置一个元素的内边距,pandding区域是指一个元素内容与其边界之间的空间,该属性不能为负值.

单样式写法

div{

pandding-top:100px;

padding-right:100px;

padding-bottom:100px;

padding-left:100px;

}

复合写法

div{

padding:100px;    /*上下左右*/

padding:100px 200px;    /*上下    左右*/

padding:100px 200px 300px;    /*上    左右    下*/

padding:100px 200px 300px 400px;    /*上    右    下    左 (顺时针)*/

}

特性:

元素框的最内部分是实际内容,直接包围内容的是内边距.

在CSS中,width和height属性是指内容区域的宽度和高度.增加内边距、边框和外边距不会影响内容的区域的尺寸,但会增加元素框(父元素)的总尺寸.

盒子占位大小:

盒子的实际大小+margin    如果是块级(block)那么后面(右方)都是盒子的占位大小

盒子的宽度= 盒子的本身宽度 + 边框左右宽度*2 +左右padding大小*2

 

 

 

 

本文为原创文章,转载请注明出处!