CSS笔记-1

2017-01-01 10:33:28来源:CSDN作者:rocky_03人点击

第七城市

1. 选择器

组选择器

p1,p2,p3{    font-size:10px;    color:red;}<div>    <p1>this is p1</p1>    <p1>this is p2</p1>    <p1>this is p3</p1></div>

标签选择器

格式:

#idType{    /* ID选择器  只能使用一次 */    font-size: 20px;    color: yellow;}<div id="idType">ID选择器</div>

类选择器

格式:

.classType{    /* 类选择器  能使用多次 */    font-size: 25px;    color: green;}<div class="clssType">类选择器</div>

后代选择器

//只有对 p1的后代span标签内容起作用,其他的标签span不起作用p1 span{    color:red;} <h1>标题:<span>此处不起作用</span></h1><p1>内容:<span>此处后代选择器起作用</span></p1>

子选择器

只对直接子标签起作用

p2 > sp{    color:red;}<p2><!-- 直接子元素,颜色改变 -->    <sp>222</sp>        <p3> <!-- 此处的为第二代子元素不会改变颜色 -->            <sp>333</sp>        </p3></p2>

CSS的盒子模型

  1. 边框(border)
    • dashed(虚线)
    • dotted(点线)
    • solid(实线)
  2. 外边距(margin)
  3. 内边距(padding)
    BOXMODEL

CSS布局模型

  1. 流动模型(Flow)
  2. 浮动模型(Float)
  3. 层模型(Layer)

流动模型

网页默认的排布模型,内联元素在同一行。块级元素单独占一行。块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。

浮动模型

任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。

/* 浮动模型 */div{    width:100px;    height:100px;    border:2px red dotted;}#div1{float:right;}#div2{float:left;}<div id="div1">left</div><div id="div2">right</div>

层模型

什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。

  • 绝对定位(position: absolute)
  • 相对定位(position: relative)
  • 固定定位(position: fixed)
  • 绝对定位(position: absolute)

绝对定位(position: absolute)

如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。

/* 层模型--绝对定位 */#div3{    position:absolute;    top:20px;    right:100px;}<div id="div3">绝对定位</div>

相对定位(position: relative)

如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
以前的位置

/* 层模型--相对定位 */#div4{    position:relative;    left:100px;    top:50px; }<div id="div4">相对定位,这时原来的位置</div>

固定定位(position: fixed)

fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同

/* 层模型--固定位置 ,类似于广告条,滚动条拖动,但是位置始终不变*/#div5{    position:fixed;    right:0px;    bottom:0px;}<div id="div5">固定定位fixed,类似于广告条</div>

Relative和Absolute组合使用

两个要注意的点:
1. 参照定位的元素必须是相对定位元素的前辈元素
2. 参照定位的元素必须加入position:relative;

组合定位的时候父元素必须是relative子元素是absolute

/* Relative 和 Absolute 组合使用*/#box1{    position:relative;    width:200px;    height:200px;          }#box2{    position:absolute;    top:50px;    left:50px;         }<div id="box1">    <div id="box2"></div></div>
第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台