CSS网页布局
注:优化样式表:增加css样式表的可读性
减伤样式重复
一.主要内容
1.布局分类;131 121
2.display属性排版
3.float属性排版(横向多列布局)
4.防止父类盒子塌陷
二.标准文档流:
a>组成
块级元素(block)
内联元素(inline)
b>display属性值:block、inline、inline-block、none。
值block:将元素设置为块状元素
值inline:将元素设置为行内元素
值inline-block:拥有两种特性。
补充: visibility:hidden; 属性和 display:none; 属性相似。
c>folat属性值:left、right、none.
值left:左浮动
值right:右浮动
值none:不浮动
d>clear属性值:left、right、both、none。
值left:左侧不允许出现float
值right:右侧不允许出现float
值both:两侧不允许出现float
值none:(默认)允许出现float
e>防止父类塌陷
1)浮动元素后面加空div
2)设置父元素的高度
3)父级添加overflow(溢出)属性
值visible:默认值,内容不会被修剪,会呈现在盒子之外。
值hiddle:内容会被修剪,并且其余内容是不可见的。
值scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余内容。
值auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
#father{verflow:hidden;border:1px # solid;}
4)父级添加伪类after
.fathter:after{
content:' '; /*在clear类后面添加内容为空*/
display:block; /*把添加的内容转化为块元素*/
clear:both; /*清除这个元素两边的浮动*/
}
CSS网页布局的更多相关文章
- CSS网页布局全精通
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...
- CSS网页布局错位:CSS宽度计算
为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
- 简单实用的CSS网页布局中文排版技巧
由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...
- CSS网页布局中易犯的30个小错误
即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...
- 前端学习笔记之CSS网页布局
CSS网页布局 阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...
- 项目实践2:项目中的CSS网页布局(常用)
好家伙, 整个网页做下来,最主要的,自然是css的网页布局(菜鸟好用啊) 我需要一个大概这样的布局: 然后上代码: <!DOCTYPE html> <html> <hea ...
- 《精通CSS网页布局》读书报告 ----2016-12-5补充
第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦! (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...
- 深入理解CSS网页布局-理论篇
在CSS网页开发布局中,需要对浮动和定位有深刻的理解才能在开发中游刃有余. 基于此,在博客园中做了本篇总结,这些总结来自实践经验和阅读一些书籍后的理解总结,主要内容为浮动,清除浮动,定位. (可点击屏 ...
- DIV+CSS 网页布局之:混合布局
1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...
随机推荐
- spring boot 入门(一)
转自构建微服务:Spring boot 入门篇 什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程. ...
- pod 更新慢解决方案
pod install --verbose --no-repo-update pod update --verbose --no-repo-update
- 把http网站变成https网站
所需条件: 一个网站域名,必须是注册的合法域名,国内域名最好已经通过备案: 一个空间,可以是虚拟空间或者云主机: 一张SSL证书. 操作步骤: 域名注册.国内的有万网和国外GoDaddy,当然域名注册 ...
- 折腾newifi3 d2笔记
1.忘记密码,恢复出厂 通电开机,等正常运行后,长按RESET大约6~8秒,见所有灯开始一起慢闪,可松手等重启就是出厂状态了,出厂IP是:192.168.99.1 2.免拆机刷breed 首先要打开s ...
- Longest Palindrome 最长回文串问题
1.题目 Given a string s, find the longest palindromic substring in s. You may assume that the maximum ...
- python os.path.isfile函数
最近刚开始学习Python,做了个小练习:扫描当前目录及其子目录中的文件,找出文件名中含有指定关键字的文件并打印文件名.思路很简单,如果是文件则判断是否满足条件:如果是目录则进入目录搜索文件,递归. ...
- Git自学笔记
Git是什么? Git是目前世界上最先进的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git与SVN的区别有哪些? ① Git是分布式的,SVN不是.这是Git和其它非分布式版本控制系 ...
- Double 保留小数点后N位
/** * parse double f to num decimals * @param f * @param num the decimal number * @return the format ...
- [InstFiles]在Inno中打包隐藏和系统文件的头文件
本文来自:http://www.kngstr.com 简介: 一直以来,Inno的作者都没有提供打包隐藏文件和系统文件的功能. 但是,如果我们做批量打包,批量封装的时候,总会需要这样的功能,因为我们不 ...
- java批量生成用例脚本-保留字关键词的用例脚本生成
20171012新补丁包程序,程序整理了全部的关键字和保留字,支持 字段a = "字段b" 与 字段a = 字段b,并做了代码重构.对补丁包进行关键字专项测试,验证关键字保留字作为 ...