目录
1.尺寸与边框
1.尺寸单位:
1. px 像素，最常用的单位，也是浏览器默认单位
2. % 百分比 占据父元素对应属性的占比
------以下为绝对单位，不常用---
3. in 英寸 1 in = 2.54 cm
4. pt 英磅 1 pt = 1/72 in
5. cm 厘米
6. mm 毫米
注意：css中的尺寸单位是不能省略的，0除外
2.颜色取值：
1. 取值英文单词 red green blue ...不考虑单位
2. 取值十六进制 #aabbcc
每两位一组代表一种三原色 三组分别对应红绿蓝
每一位取值范围 0~9 a~f
3. 短十六进制 #abc
由三位组成，每一位就代表了一种三原色
浏览器在渲染时会自动对每一位进行重复，补全成六位的十六进制
#abc = #aabbcc
4. css 提供的颜色表示法
rgb(r,g,b) 每个值取值 0~255
红色 rgb(255,0,0)
5. css提供的颜色表示法
rgba(r,g,b,alpha) 颜色取值 0~255 alpha 表示透明度 取值 0-1(透明-不透明)
3.尺寸属性(overflow)
1.作用：
改变元素的宽度和高度
属性 width height
取值为数值，单位为px 或 %
2.使用：
所有的块级元素可以设置宽高，默认情况宽度与父元素保持一致，高度由内容决定;
所有的行内元素不可以设置宽高，大小由内容决定
3.内容溢出处理:
属性：overflow
取值：
1.visible 默认值，溢出部分可见
2.hidden 溢出部分隐藏不可见
3.scroll 设置内容滚动显示，显示滚动条
4.auto 自动 当内容溢出时，自动添加滚动条并且可用
注意：
scroll 表示显示水平和垂直方向的滚动条，不管是否真的需要
auto 根据内容需要，添加水平或者垂直方向的滚动条
4.边框(border)
border : border-width || border-style || border-color
border-width border-style border-color 三个值缺一不可
e.g. border : 5px solid red;
border-width:设置边框线的宽度
border-style：设置边框线的样式，取值
1.solid 实线
2.dashed 虚线
3.dotted 点线
4.double 双线(不常用)
border-color:颜色值，可以使用transparent表示透明色
3.特殊用法
取消边框 border: none
4.单边框设置
border 属性用来设置 上右下左四个方向的边框
四个方向单独设置边框：
border-top : 5px solid red;
border-right : 10px solid green;
border-bottom : 4px solid gray;
border-left : 1px solid blue;
5.网页三角标制作
1.元素尺寸为0
2.为元素添加四个方向的边框
3.设置其中三条边框颜色为透明transparent
6.圆角边框
属性:border-radius
取值:px 或 %
作用:将边框的直角变成圆角
e.g.
border-radius : 10px;表示四个角都按照10px的半径去生成圆角
border-radius : 5px 10px 15px 20px;四个值代表了上右下左四个角
border-radius : 5px 10px;第一个值表示上下，第二个左右
border-radius : 5px 10px 15px;第四个默认和第二个值相同
注意：边框圆角在元素不设置边框的情况下依然有效，可以通过设置50%呈现圆形或椭圆形，修改元素显示形状
7.边框阴影
属性 box-shadow : h-offset v-offset blur spread color;
h-offset:阴影的水平偏移距离
取值为数字
取值为正，阴影向右偏移
取值为负，阴影向左偏移
v-offset:阴影的垂直偏移距离
取值为数字
取值为正，阴影向下偏移
取值为负，阴影向上偏移
blur:阴影的模糊程度
取值为数字
值越大，越模糊
spread:阴影扩大或是缩小的距离
取值为数字
取值为正，阴影会扩大
取值为负，阴影会收缩
color:设置阴影颜色
8.浏览器坐标系
默认浏览器左上角为原点，向右向下为X轴和Y轴正方向，向左向上为负方向
9.表格的细线边框
table{ border-collapse:collapse; } collapse 单词是合并的意思
border-collapse:collapse; 表示边框合并在一起。
2.盒模型/框模型
1.元素皆为框
盒模型：元素在文档中占据尺寸的计算方式
组成：外边距margin 边框border 内边距padding 内容尺寸
计算方式：
标准盒模型：
最终width=左右外边距+左右边框+左右内边距+内容宽度
最终height=上下外边距+上下边框+上下内边距+内容高度
（了解）怪异盒模型：
元素内容宽度=左右内边距+边框+内容
2.外边距margin
margin属性用于设置外边距。设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。
margin:0 auto;表示自动，可以用来设置元素居中
外边距实现盒子居中
1. 必须是块级元素。
2. 盒子必须指定了宽度（width）
.header{ width:960px; margin:0 auto;}
文字盒子居中图片和背景区别
1. 文字水平居中是 text-align: center
2. 盒子水平居中 左右margin 改为 auto
3. 插入图片 我们用的最多 比如产品展示类
4. 背景图片我们一般用于小图标背景 或者 超大背景图片
具有默认外边距的元素
body,h1,h2,h3,h4,h5,h6,p,ul,ol{
margin:0
}
清除元素的默认内外边距
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
1. 可以为父元素定义1像素的上边框或上内边距。
2. 可以为父元素添加overflow:hidden。
content宽度和高度
1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。
2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
3、如果一个盒子则会和父亲一样宽 占满父亲的宽度， 如果此盒子没有给定宽度 则padding 不会影响本盒子大小。
3.内边距padding
padding属性用于设置内边距。 是指 边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
1个值
padding：上下左右边距
比如padding: 3px; 表示上下左右都是3像素
2个值
padding: 上下边距 左右边距
比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3个值
padding：上边距 左右边距 下边距
比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4个值
padding:上内边距 右内边距 下内边距 左内边距
比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针
具有默认内边距的元素
ol,ul,input(文本框，密码框，按钮会存在)
ol,ul,input{
padding:0;
}
页面开发时，清除浏览器的默认边距
body,ul,ol,h1,h2,h3,h4,h5,h6,p{
margin:0;
padding:0;
}
input 可以根据需求单独设置
4.盒模型属性的支持度
1.盒模型属性:margin border padding width height
2.块元素对盒模型属性完全支持
3.行内元素对盒模型属性部分支持
行内元素可以设置 左右的内外边距
不可以设置 宽高 上下内外边距
盒子模型布局稳定性
按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。
1. margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
2. padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
3. width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做
作业：
1.制作精美导航条，内容不限
实现鼠标悬停能够改变背景色和文本色；
文本点击之后修改文本色
2.根据图片素材中作业.png 完成表单部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style type="text/css">
body{
/*外边距*/
margin: 0;
}
td{
/*右内边距*/
padding-right: 30px;
float: left;
}
.uinput{
width: 298px;
height: 38px;
/*边框*/
border: 1px solid #ccc;
/*内边距*/
padding: 0 12px;
/*取消轮廓线*/
outline: none;
/*文本框默认文本尺寸较小,手动调整为16px*/
font-size: 16px
}
.rightText{
/*水平右对齐*/
text-align: right;
}
span input{
width: 18px;
height: 18px;
/*设置input img 与其他文本元素的对齐方式 上对齐*/
vertical-align: middle;
}
span{
margin-right: 50px;
}
a{
color: #999
}
.login,.regist{
width: 145px;
height: 38px;
border: 1px solid #64a131;
/*圆角*/
border-radius: 5px;
/*字体大小和居中 按钮文本模式水平居中显示*/
font-size: 18px;
/*行高*/
line-height: 38px;
}
.login{
background-color: #64a131;
color: white;
margin-right: 20px;
}
.regist{
color: #7bae55;
background-color: #f5ffed;
}
img{
display:inline-block;
}
</style>
</head>
<body>
<h2>会员登录</h2>
<img src="../web001/img/huiyuan.jpg">
<form action="login" method="get"></form>
<table>
<tr>
<td class="rightText">手机号</td>
<td>
<input type="text" name="uphone" class="uinput">
</td>
</tr>
<tr>
<td class="rightText">密码</td>
<td>
<input type="password" name="upwd" placeholder="请输入6-20位号码字符" class="uinput">
</td>
</tr>
<tr>
<td></td>
<td>
<span><input type="checkbox" name="isSaved" checked>记住密码</span>
<a href="#">忘记密码?</a>
<a href="#">快捷登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="login" value="登录" class="login">
<input type="submit" name="button" value="注册会员" class="regist">
</td>
</tr>
</table>
</body>
</html>
扫一扫
322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
