web前端工程师--html和css基础课程(五)

来源：互联网发布：上海市相对湿度数据编辑：程序博客网时间：2024/05/16 15:41

11-1 盒模型代码简写

1.设置外边距(margin)、内边距(padding)、和边框（border）设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。通常有三种缩写方法：

a.如果top、right、bottom、left的值相同，如；marigin:10px 10px 10px 10px；可缩写为margin:10px；

b.如果top和bottom值相同，left和right的值相同，如:margin:10px 20px 10px 20px；可缩写为margin:10px 20px;

c.如果left和right的值相同，如:margin:10px 20px 30px 20px；可缩写为:margin:10px 20px 30px;

11-2 颜色值缩写

1.当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。

如：p{color:#336699;}可以缩写为p{color:#369;}

11-3 字体缩写

1.body{

font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:12px;

line-height:1.5em;

font-family:"宋体",sans-serif;

}

缩写为body{font:italic small-caps bold 12px/1.5em "宋体",sans-serif;}

2.注意：使用这一简写方式至少要指定font-size和font-family属性，其他属性如未指定将自动使用默认值

在缩写时font-size与line-height中间要加入"/”

3.一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：

body{font:12px/1.5em "宋体",sans-serif;}

只是有字体、行间距、中文字体、英文字体设置

第12章单位和值

12-1 颜色值

1.颜色设置：字体颜色(color)、背景颜色(background-color)、边框颜色(border)

2.颜色设置方法:a.英文命令颜色

p{color:red;}

b.RGB颜色：由R(red)、G(green)、B(blue)三种颜色的比例来配色

p{color:rgb(133,45,200);} p{color:rgb(20%,33%,25%);}

每一项的值可以是0~255之间的整数，也可以是0%~100%的百分数

c.十六进制颜色（普遍）

p{color:#00ffff;} p{color:#0ff;}

12-3 长度值

1.像素（css规范中假设"90像素=1英寸"），相对实际像素

2.em=本元素给定字体的font-size值，如果元素的font-size为14px，那么1em=14px

当给font-size设置单位为em时，此时计算的标准以p的父元素的font-size为基础

3.百分比：相对font-size值

第13章 css样式设置小技巧

13-1 水平居中设置----行内元素

1.如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center;来实现的

例：html代码：

<body>

<div class="txtCenter">我想要在父容器中水平居中显示。</div>

</body>

css代码：

<style>

.txtCenter{

text-align:center;

}

</style>

在以上的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素

13-2 水平居中设置----定宽块状元素

1.通过设置“左右margin”值为“auto”来实现居中的

margin:20px auto;

或margin-left:auto;

margin-right:auto;

13-3 水平居中设置--不定宽块状元素

1.加入table标签（包括<table>、<tr>、<td>），为这个table设置"左右margin"居中

2.改变块级元素的display为inline类型（设置行内元素显示），然后使用text-align:center来实现居中效果

这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的display类型改为inline，变成了行内元素，所以少了一些功能，比如设定长度值

3.通过给父元素设置float，然后给父元素设置position:relative和left:50%。子元素设置position:relative和left:-50%来实现水平居中

13-4 垂直居中---父元素高度确定的单行文本

1.通过设置父元素height和line-height高度一致来实现

line-height与font-size的计算值之差，在css中成为行间距“”。分为两半，分别加到一个文本行内容的顶部和底部

这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽度时，有就内容脱离了块

13-5 垂直居中---父元素高度确定的多行文本

父元素高度确定的多行文本、图片等的竖直居中的方法有两种：

1.使用插入table（包括tbody、tr、td）标签，同时设置vertical-align:middle

css中有一个用于竖直居中的属性vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用

因为td标签默认情况下就默认设置了vertical-align为middle，所以我们不需要显示地设置了

2.在chrome、firefox及IE8以上的浏览器下可以设置块级元素的display为table-cell（设置为表格单元显示），激活vertical-align属性

好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容IE6、7。而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质

13-6 隐性改变display类型

当为元素（不论之前是什么类型元素，display:none除外）设置以下2个句之一：

1.position:absolute

2.float:left或float:right

元素的display显示类型就会自动变成以display:inline-block（块状元素）的方式显示，当然就可以设置元素的width和height了，且默认宽度不占满父元素

阅读全文

0 0