内容回顾:
盒子:
内边距:padding,解决内部矛盾,内边距的增加整个盒子也会增加
外边距:margin,解决外部矛盾,当来盒子都有外边距的时候,取两者最大值
边框:border
border-color:边框颜色
border-边框的宽度
border-style:边框的风格,double(双线),solid(实现),虚线(dashed),点线(dotted)
float:浮动,为了解决让盒子们漂在一行
浮动的方式:left和right
清除浮动目的:让父盒子不浮动的同时,它的高度还被浮动的儿子们撑起来
清除浮动的方法:clear:both;用了五个操作,实现的障眼法,官方推荐写法;overflow:hidden
盒子的margin和padding的值的设置:按顺时针可以简写,也可以根据位置来详细写
写的值:px
margin可以有负值,其他的不可以
px补充,写代码的时候px不设置小数,页面中的效果是迫不得已有内容撑起的,所以有小数的显示
思维导图:画明白了是你自己的,画不明白别抄.
今日内容:
定位
css的样式
字体
文本
颜色
display
css的其他属性
引入的时候:定位,
内容详细:
子层设置了margin-top之后牵连了父层,,跟邻居有距离
父层通过overflow:hidden隐藏溢出
<style>
.die {
width: 100%;
height: 40px;
background-color: #444444;
}
.shushu {
width: 100%;
height: 100px;
background-color: yellowgreen;
overflow: hidden;
}
#logo {
width: 300px;
height: 40px;
background-color: orange;
margin-top: 22px;
}
</style>
</head>
<body>
<div class="die">
<div id="box1"></div>
</div>
<div class="shushu">
<div id="logo"></div>
</div>
</body>
方法2:
设置父盒子的padding,其他的兄弟们设置margin-top:top为负值
方法3:
让logo和广告都浮起来,前提是父盒子得有高度,如果没有高度,用清除浮动
定位
相对定位:相对于某个具体的对象来说,自己的定位
绝对定位:指定自己的定位
脱离了标准文档流,它可以对其他盒子产生覆盖现象
<style> body{ margin: 0; } .die { width: 100%; height: 100px; background-color: lightblue; position: relative; /*overflow: hidden;*/ } #son1 { width: 200px; height: 50px; background-color: yellow; position: absolute; top: 22px; /*position: relative; !* 错误操作,找错全局相对的对象 *!*/ } #son2 { width: 300px; height: 80px; background-color: lightpink; position: absolute; top: 22px; left: 300px; } </style> <body> <div class="die"> <div id="son1"></div> <div id="son2"></div> </div> <div class="gbw"> <div id="son3"></div> <div id="son4"></div> </div> </body>
position:fixed
具体的方向和值取定位,常用在导航栏的设置
z-index:只有在设置了固定定位的时候才起作用,它的值只有两类,正的代表遮盖,
/*font-family: 方正兰亭超细黑简体; !* 改变字体的风格 *!*/
font-size:50px ; /* 字体大小*/
/*font-weight: 900;*/
font-weight: normal; /* 字体宽度,可以是命名法,也可以从100-900里取值 */
color: #cc6600; /* 字体颜色 */ /* 命名法,16进制,RGB,RGBA */
color: rgba(255,0,0,0.8);
body {
text-align: justify; /* 文本对齐方式 */
text-indent: 2ex; /* 文本的首行缩进,中文用em,英文用ex */
/*word-spacing:100px ; !* 词之间的间距 *!*/
text-transform: capitalize; /* 首字母大写 */
text-decoration: blink; /* 改变文字的上,中,下划线 */
direction: rtl; /* 根text-align相似,但是他没有居中的玩意儿 */
}
背景图:
/*display: inline-block; !* 行内标签变身盒子的方法一!!!!!!!!!!!!!!它变身后在标准文档流 *!*/
/*float: left;*/ /* 行内标签变身盒子的方法二!!!!!!!!!它变身后脱离标准文档流 */
/*position: absolute;*/ /* 行内标签变身盒子的方法二!!!!!!!!!它变身后脱离标准文档流 */
根隐藏相关的操作:
/*display: none; !* 隐藏标签的所有 *!*/
visibility: hidden; /* 隐藏,但是它隐藏后的坑还在 */