首页 > > 网页制作 > css >

网页布局基础

2018-09-18 06:34:24来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

1、盒子模型的第一层到第五层：
     border、padding+content、background-image、background-color、margin
2、清除浮动。对受到浮动影响的标签作以下操作：
     1、clear: both;
     2、clear: right;  clear: left;
     3、设置宽度width: 100%(或者固定宽度)+overflow: hidden;
3、两种清除浮动方法的使用场景：
     1、当子元素设置了浮动，父元素没有设置浮动而导致的父元素高度不能自动扩展，缩成一条线，子元素从父元素中溢出时，适合使           用同时设置width:100%（或固定宽度值）+overflow:hidden的方式来清除浮动；此法可同时去除紧邻的块级受到的浮动影           响，而不需要再对受到浮动影响的紧邻块级元素设置去除浮动。   
     2、如果是紧邻的块级元素受到浮动影响,对该受到影响的块级设置clear:both或者clear:left,clear:right更为合适。
 
     注意：width设置为100%就是继承父容器的宽度。左右撑满整个容器，为自己清除浮动创建条件。再加溢出隐藏，就可以把包裹                 浮动的部分去除。
4、绝对定位特点：
  • 建立了以包含块位基准的定位
  • 完全脱离标准文档流
  • 随即拥有偏移属性跟z-index属性
  1. 未设置偏移量时：(left、top)
         无论是否存在已经定位的祖先元素，都保持在元素初始位置 脱离标准文档流
  2. 设置偏移量时：偏移参照的基准：
         无已定位的祖先元素：以<html>为偏移参照基准；
         有已定位的祖先元素：以距其最近的已定位的祖先元素为偏移参照基准。
    注意：当一个元素设置了绝对定位，没有设置宽度时，元素的宽度根据内容进行调节。
 
练习题：已知一个设置了绝对定位的元素b，位于其父元素a中，a元素为静态元素，则b元素将以(html)为基准进行偏移。
       答案是因为a为静态位置，所以要以根元素为基准进行偏移，也就是html元素（静态定位是position:static，是元素的默认定位属性。只有设置了absolute或relative或fixed才算已定位的父级元素。
 
5、隐藏按钮文字的小技巧：
            text-indent: -999px;
           overflow: hidden;
     先使用text-indent:-999px;语句把被设置元素“挤出去”了，然后设置溢出的元素都隐藏起来，也就是被挤出去的元素隐藏起来。
6、媒体查询：
     可被用于css中的@media和@import规则上，也可被用在HTML和XML中。
     1）@media screen and (width: 800px){...}
     2）@import url(example.css) screen and (width: 800px);
     3）<link media="screen and (width: 800px)" rel="stylesheet" href="example.css"/>0

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：纯css面板插件，自适应，多样式

下一篇：【web】movie review——静态页面训练、css训练

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签