锐客网

  1. 首页 > it技术 > >

2019.12.5日笔记

10-02 认识盒子模型组成 2019.12.5日笔记
文章图片
10-03盒子边框 语法: border : border-widthII border-stylell border-color
边框样式用于定义页面中边框的风格，常用属性值如下:
none:没有边框即忽略所有边框的宽度(默认值)
solid:边框为单实线(最为常用的)
dashed:边框为虚线
dotted:边框为点线
double:边框为双实线
10-04边框综合写法 上边框：border-top: 宽度 样式 颜色;
下边框 ：border-bottom: 宽度 样式 颜色;
综合性写法：border: 宽度 样式 颜色;
10-05合并细线表格 语法格式：border-collapse: collapse;
10-06圆角矩形 语法格式：border-radius: ;
技巧；取盒子宽度和高度的一半则会变成一个圆形，50%也可实现圆形。
四种情况：
当只取一个数值时，四个角都为这个数值；
当取两个数值时，左上角 右下角取第一个值和左上角 右下角取第二个值；
当取三个数值时，左上角取第一个值，右上角、左下角取第二个值，右下角取第三个值；
当取四个值时，左上角第一个值，右上角第二个值，左下角第三个值，右下角第四个值；
下面是当div宽度为200，高度为200时，各种情况：
2019.12.5日笔记
文章图片
10-07盒子内边距（padding） 语法：padding:像素 ;
四种情况：
【2019.12.5日笔记】当只取一个值时，上下左右四个内边距都为这个值；
当取两个值时，上下第一个值，左右第二个值；
当取三个值时，上 第一个值，左右第二个值，下 第三个值；
当取四个值时，数值按顺时针排列，顺序为上右下左
如下图所示：
2019.12.5日笔记
文章图片


2019.12.5日笔记
文章图片


2019.12.5日笔记
文章图片


2019.12.5日笔记
文章图片

10-07新浪导航栏（练习）




nav {
height: 41px;
background-color: #FCFCFC;
border-top: 3px solid #FF8500; /* 上边框 */
border-bottom: 1px solid #EDEEF0; /* 下边框 */
}
nav a {
font-size: 14px;
color: #4C4C4C;
text-decoration: none; /* 取消下划线 */
padding: 0 15px; /* 上下是0，左右是15px */
height: 41px; /* 行高等于高度可以使文字垂直居中 */
/* 因为链接是行内元素没有大小 所以需要转换 行内块 */
display: inline-block;
}
nav a:hover{ /* 链接伪类选择器 */
background-color: #eee;
}






10-08外边距以及盒子居中对齐 margin 属性用于设置外边距。设置外边距会 在元素之间创建“空白”，这段空白 通常不能放置其他内容。
语法格式：
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距右外边距下外边距左外边
取值顺序跟内边距相同。
外边距可以使盒子居中对齐 条件：
1.必须是块级元素。
2.盒子必须指定了宽度(width)
居中格式：margin: 像素 auto;
10-09文字盒子居中图片和背景区别 文字盒子居中： text-align: center; 文字水平居中
margin: 10px auto; 盒子水平居中 左右margin 改为auto就可以了
图片更改大小： width: 200px;
height: 200px;
插入图片更改大小width 和 height
背景图片更改大小： background-size: 200px 210px;
背景图片更改大小 只能用background-size
图片更改位置： margin-top: 30px;
插入图片更改位置 可以用margin和padding盒模型
背景图片更改位置： background-position: 30px 50px;
背景图片更改位置 用background-position
10-10清除内外边距 margin: 0;
padding: 0;
来清除内外边距

    推荐阅读


    上一篇：你听，风在吹

    下一篇：2018-01-30