CSS学习笔记---（七）

来源：互联网发布：淘宝好评评语编辑：程序博客网时间：2024/05/22 12:21

1. 网页中，元素有3种布局模型=流式布局+浮动布局+绝对定位
2. 流动模型（一）
特点：块状元素都会在所处的包含元素内，自上而下，按顺序垂直延伸分布，默认状态下宽度100%。流动模型下，内联元素都会在所处的的包含元素内，从左到右，水平分布显示。
3. 浮动模型（二）
特点：块状元素太霸道，一个人显示为一行，要让两个块状元素显示在一行——设置为浮动元素—-可以用CSS定义浮动。

div{  width:200px;  height:200px;  border:2px solid red;  float:left;}<div id="div1"></div><div id="div2"></div>//如上代码是两个框框，紧挨着，靠左显示，当然如果float:right;就会是两个框紧挨着靠右显示。div{  width:200px;  height:200px;  border:2px solid red;}#div1{float:left;}#div2{float:right;}//如上的样式，是两个框框，一左一右显示。

4.层模型—-3种形式：绝对定位（position:absolute）—相对定位(position:relative)—固定定位(position:fixed)

绝对定位—–position:absolute—-作用：将元素从文档流中拖出来，然后使用left、right、top、bottom属性中相对最接近的一个具有定位属性的父包含块进行绝对定位，如果没与这样的包含块，就行对于浏览器窗口

div{  width:200px;  height:200px;  border:2px red solid;  position:absolute；  left:100px;  top:50px;}//效果：div元素相对于浏览器窗口，向右移动100px，向下移动50px。

相对定位—-position:relative;—通过left right top bottom属性确定元素在相对以前位置~~~~的移动。移动的方向和幅度由left,right,top,bottom属性决定，偏移以前的位置保留不动
固定定位——position:fixed;—-与absolute相似，但它相对移动的是坐标视图（屏幕内的网页窗口）本身。—-就是你滚动滚动条，但我在浏览器窗口中现实的位置依然不变。

Relative与Absolute的组合使用=====被当成参照物的元素必须加入position:relative;======需要定位的元素，使用top,bottom,left,right来定位

<div id="box3">    <img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg">    <div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div></div>所以CSS部分#box3{  width:200px;  height:200px;  position:relative;}#box4{  width:99%;  position:absolute;  bottom:0;}

5.如果设置的颜色是16进制的色彩，如果每两位的值相同，可以缩写一半。
p{color:#000000;}
可以缩写为p{color:#000;}
p{color:336699;}
p{color:369;}
6.CSS代码的缩写

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-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。

7.命名颜色的几种方法：

p{color:red;}p{color:rgb(133,45,200);}  每一项是0-255之间的整数p{color:rgb(20%,33%,25%);}  每一项是0——100%的百份数p{color:#00ffff;}======最普遍的方法。每一项变成了十六进制00-ff

8.长度值—常用的单位：px（像素） em %百分比—三种单位都是相对单位

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

//如下<body>  <div class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中显示。</div></body>//CSS样式为：<style>  div.txtCenter{    text-align:center;  }</style>

——定宽块状元素+不定宽块状元素
——定宽块状元素，可以通过左右的margin值为auto 来实现居中

如下：<body>  <div>我是块状元素，哈哈，我要水平居中显示</div></body>CSS如下：<style>  div{    border:1px solid red;/*为了居中效果显示的明显，加了边框*/    width:500px;/*定宽，定的是字的外面的框的宽度*/    margin:20px auto;/*上右下左，上下为20px，左右为auto来实现居中的效果*/  }  /*!!!其中宽度width:500px; 与 margin:20px auto;两者不可缺一。!!!*/</style>

———不定宽块状元素的方法3种
1.加入table标签
2.设置display:inline方法
3.设置position:relative和left:50%

0 0