发表于： 2019-09-27 07:06:21
1 903
看了其他人的任务情况，好吧，我不得不承认我自己太拖拉了，到现在还没看到盒子，今天任务，学会盒子，了解div，并初步完成九宫格
第九章 权值
CSS标签样式的继承性权值0.1（不可靠）
权值 标签1 类10（.XXXXX）ID100（#XXXXXX）
层叠的，最后一个样式会被采用
为某些样式设置最高权值 eg: p{color:red!important}
第十章 文字排版
字体 eg:{font-family:"Microsoft Yahei"} 一般网页字体用微软雅黑
字号、颜色 eg:body{font-size:12px;color:#666}
粗体 font-weight：bold;
斜体 font-style:italic;
下划线 text-decoration:underline;
删除线 text-decoration:line-through;
段落排版首行缩进 eg: p{text-indent:2em;}缩进两字符
行间距（行高） eg: p{line-height:1.5em}1.5倍行距
中间文字间距（字母间间距） letter 字母 word 单词
eg: h1{letter-spacing:50px;}
块状元素居中 text-align:center; 居左 left 右right
第十一章 元素盒模型
标签元素大概分为三类 块状元素、内联元素（行内元素）、内联块状元素
常见块状元素：<div><p><h1>'''''<h6><ol><ul><dl><table><address><blockquote><form> 块级元素特点：每个显示时候都独占一行，高宽边距皆可设置，默认是父容器100%。可将内联元素转换为块状元素 eg: a{display:block;}
常见内联元素<a><span><br><i><em><strong><lable><q><var><cite><code> 特点：和其他元素在同一行，高宽顶底边距不可设置。可将块状元素转换为内联元素 eg: div{display:inline;}
常见内联块状元素<img><input> 特点：和其他元素在同一行，高宽边距皆可设置。可将其他元素转换为内联块状元素 eg: div{display:inline-block;}
盒模型padding top/bottom/left/right margin
元素实际高度，图片像素值+两边padding像素+border像素+margin像素=262
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}边框（三个属性：粗细 样式 颜色） 简写形式div{border:2px solid red;}
div{
border-width:2px(或者thin/medium/thick)(常用像素值)
border-color:red(或者设置为十六进制颜色 eg:#E00(#不能忘))
border-style:solid(边框样式，dashed（虚线）/dotted（点线）)
}
单独设置上（下、左、右）边框 eg: div{border-top:2px solid red;}
盒模型-填充 简写模式div{padding:20px 10px 9px 8px;}(上 右 下 左（顺时针）)
都是一致的div{padding:20px;}
上下一致左右一致div{padding:20px 10px;}
左右一致（此处都是10px）div{padding:20px 10px 30px;}
边界margin语法与padding一致，
不同 在于padding显示在边框里面，margin显示在边框外面
第十二章 布局
CSS三种布局模型 流动模型（fow）浮动模型（float）层模型（layer）
流动模型：默认模式，块状元素自上而下排列（未设置宽度时，每个元素占据整行）内联元素从左到右
浮动模型：实现块状元素并排显示 float:left/right
div{
width:200px;
height:200px;
border:2px red solid; float:left（right）;}
<div id="div1"></div>
<div id="div2"></div>div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}层模型:绝对/相对/固定定位（position:absolute/relative/fixed）
绝对定位：最近的一个具有定位属性的父包含块，没有就body元素（浏览器窗口）
div{
width:200px;
height:200px;
border:2px red solid; position:absolute;
left:100px;
top:50px;}相对定位：偏移前元素位置不动。
固定定位：视图不随窗口滚动条移动，相对于网页窗口本身移动。
绝对定位和相对定位结合可以实现自由定位，前提是父元素采用相对定位(relative)
第十三章 缩写
p{color: #336699;}可以缩写为p{color:#369;}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;
}注意：至少要指定 font-size 和 font-family 属性，其他可以默认，在缩写时 font-size 与 line-height 中间要加入“/”斜扛
常用模式 eg：
body{
font:12px/1.5em "宋体",sans-serif;
}第十四章
颜色表现形式
p{color:red;} 常用p{color:rgb(133,45,200);} RGB,PS常用p{color:rgb(20%,33%,25%);} RGBp{color:#00ffff;} RGB的十六进制https://www.imooc.com/code/3884 配色表，可自行百度
长度 px(像素 CSS假设90像素=1英寸，实际情况和显示器有关)
em(与本元素font-size有关，或父元素有关)
%（与本元素font-size有关） 以上均为相对
第十五章
先不写了
简单的页面显示代码
<!DOCTYPE html>
<html>
<style type="text/css">
div{
width: 31%;
padding-top: 31%;
margin: 1%;
background-color:orange;
float:left;
}
</style>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
返回列表
评论