CSS(Cascading Style Sheets,层级样式表)
- 内容和格式分离
使用方式
- 外部样式表 (保存在外部 .css )
- 内部样式表(位于 <head> 标签内部)
- 内联样式(在 HTML 元素内部)
css语法
选择器、属性、值
p { font-family: times; }
选择器
- 类选择器用于指定一组元素的样式
- 类选择器使用 HTML类属性,并使用“.”定义
- id 选择器用于为单个唯一元素指定样式
- id 选择器使用 HTML元素的id属性,并使用“#”定义
- 简单的元素选择器
p { color: blue }
- 派生选择器
#main img { border: solid black 5px; } //id为main中的img控制
css定位
- CSS定位属性( top 、 bottom 、 left 、right ):定位元素
- 有四种不同的定位方法
- 静态定位
- 默认情况下, HTML元素定位为静态,始终根据页面的正常流定位静态定位元素(按照内容顺序进行显示)
- 静态定位元素不受 top 、left 、bottom 、right属性的影响
- 相对定位
- 相对定位的元素相对于其 正常位置定位
- 元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留
<style type="text/css"> ? #div-before, #div-after { background-color:#aee; color:#000; width:400px; } ? #div-1 { width:400px; background-color:#000; color:#fff; position: relative; //相对定位 left: 120px; // top: 30px; // } ? #div-1-padding { padding:20px; } ? </style> ? <div> <div id="div-before"> <p>id = div-before</p> </div> <div id="div-1"> <div id="div-1-padding"> <p>id = div-1</p> <div id="div-1a"> <p>id = div-1a</p> <p>Lorem ipsum dolor sit amet.</p> </div> <div id="div-1b"> <p>id = div-1b</p> <p>Lorem ipsum dolor sit amet .</p> </div> </div> </div> ? <div id="div-after"> <p>id = div-after</p> </div> </div>
|
- 绝对定位
- 绝对定位元素相对于第一个具有非静态定位的父元素定位。 如果找不到这样的元素,则相对的块是 <HTML>
- 元素框从文档流完全删除。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样
-
<style type="text/css"> ? #div-before, #div-after { background-color:#aee; color:#000; width:400px; } ? #div-1 { width:400px; background-color:#000; color:#fff; position: absolute; // } ? #div-1a { background-color:#d33; color:#fff; position: absolute; //绝对定位 right: 0px; // top: 0px; // } ? #div-1-padding { padding:20px; } ? </style> ? <div> <div id="div-before"> <p>id = div-before</p> </div> <div id="div-1"> <div id="div-1-padding"> <p>id = div-1</p> <div id="div-1a"> <p>id = div-1a</p> <p>Lorem ipsum dolor sit amet.</p> </div> <div id="div-1b"> <p>id = div-1b</p> <p>Lorem ipsum dolor sit amet .</p> </div> </div> </div> ? <div id="div-after"> <p>id = div-after</p> </div> </div>
div-after??? |
- 固定定位
- 具有固定位置的元素相对于浏览器窗口定位
- 即使滚动窗口,它也不会移动
原文地址:https://www.cnblogs.com/tianjiazhen/p/12235537.html
时间: 2024-11-09 01:13:23