HTML和CSS的进一步学习
来源:互联网 发布:股票行情数据接口 编辑:程序博客网 时间:2024/06/10 09:07
1.标准文档流
1.1 当浏览器解析网页的时候,遵循从上向下,从左向右的顺序来进行解析1.2 块级元素和行内元素的特性 -->如果元素一旦离开了标准文档流,那么这些特性将不会存在1.3 空白折叠 1.4 高矮不齐,底边对其 1.5 单词一旦结束并且到达了边界将自动换行1.6 如果单词始终没有空格来表示单词结束,那么单词不会换行Tip:让元素脱离标准文档流的方式: 1. 浮动float 2. 定位position标准文本流 : 主要针对的是网页中的文字(a标签和img也会被遵从文本流的规则来解析)标准文档流 : 主要针对的是标签
2.盒子模型
网页中的任何一个标签都相当于是一个盒子模型,而所有盒子模型都存在五个必要属性: width height padding border margin 有一个div ,width 300px padding:20px border:1px那么此时这个div标签在网页中实际所占的宽度: 300px + 40px + 2px = 实际所占的宽度width height 宽度和高度 padding: 内边距,内容距离边框之间的距离。padding:10px; 上下左右四个方向的padding全部都是10pxpadding-top:padding-bottom:padding-left:padding-right:准则:在使用css的时候,能够使用简写就使用简写padding:10px 20px; 第一个值表示上下的padding 第二个值表示左右的paddingpadding:10px 20px 30px; 上 左右 下padding:10px 20px 30px 40px; 上 右 下 左 padding:上为20px 下为30px 左右为15px;padding:20px 15px 30px;padding:20px; 上下左右padding-left:30px; 左 30pxborder: 边框 border: 1px solid #ccc;1px 边框的宽度solid 边框的线型#ccc 边框的颜色 英文单词 八进制表示 十六进制表示border-width:边框的宽度border-style:边框的线型border-color:边框的颜色margin 外边距margin:10px 20px 30px 40px;margin-top:margin-bottom:margin-left:margin-right:在使用margin时需要注意的点: 1.塌陷 margin塌陷存在于块级元素之间 如果元素变成了行内块元素或者行内元素则不会塌陷 如果元素脱离了标准文档流则也不会塌陷 2. 通过margin让盒子居中。 让盒子左右居中margin:0 auto; 使用margin:0 auto;让盒子居中需要注意的点: 盒子必须要有明确的width 盒子必须处于标准文档流中 margin:0 auto ;是让盒子居中,而不是让盒子里面的 文字居中。如果让文字居中用text-align:center; text-align:center / left /right Tip:如果想要移动子元素的位置,非必要情况下推荐使用父元素 的padding,而不是子元素的margin,如果必须使用margin,父元素就必须要有 border
3.浮动
float: left / right ;
浮动的特点:
1. 脱离标准文档流 (脱标),元素一旦脱离标准文档流,后面的元素 会占据浮动元素原本的位置,元素一旦浮动脱标,那么就不必 遵守文档流中的块级元素和行内元素的特性。2. 元素浮动,会脱离文档流,但是不会脱离文本流。所以会产生字围效果。3. 相互贴靠
浮动带来的影响:
1. 能够让浮动之后的元素布局产生混乱
2. 子元素浮动会对父元素产生影响
清除浮动带来的影响:
1. 给浮动的外层父元素添加高度 不推荐
2. overflow:hidden 溢出 hidden 隐藏
3. clear:both 清除浮动带来的影响
4. 隔墙法 : 外墙法 内墙法(不仅仅可以清除浮动还可以给父元素以高度)
行高和字号
line-height行高 font-size:字体大小 font-size:20px; 文字垂直居中:行高=盒子的高度 (盒子高度-总行高 ) /2 = padding-top 盒子高度 - padding-top = 新的盒子的高度 多行文字垂直居中
font 字体
font:14px/30px “KaiTi”;
上面的代码等同于下面的三句代码:
font-size:14px; 字体大小
line-height:30px; 行高
font-family:”KaiTi”; 字体族科
font-family:”KaiTi”, “”, “”, “”
超链接的美化 — 伪类
阅读全文
0 0
- HTML和CSS的进一步学习
- html、css以及其它工具的进一步学习
- HTML+CSS编写静态网站-44 如何进一步学习
- css的进一步学习(前端第三天)
- 慕课网的HTML和CSS学习。【一】
- 慕课网的HTML和CSS学习【二】
- 对spark和scala的进一步学习
- 需要进一步学习的知识点和总结
- HTML学习---------Html,CSS和JavaScript的关系
- HTML+CSS的学习
- HTML+CSS的学习
- css 相对定位和绝对定位的进一步了解
- 利用 CHtmlView 和 HTML 制作新风格的界面(有启发性,但还需进一步学习)
- 关于html和css 学习
- html和css学习二
- html和css学习小结
- Html和CSS学习总结
- html和CSS基础学习
- 02_Tomcat安装及配置
- 【JZOJ 5178】 So many prefix?
- 安卓调试不打印log日志解决方案
- QQ互联相同的回调地址,PC端报错,移动端正常
- 03_Tomcat配置常见错误_ 解压缩版的tomcat注册成服务并设置自启动
- HTML和CSS的进一步学习
- A Neural Algorithm of Artistic Style 图像风格转移
- wireshark抓包教程及tcp三次握手
- 工作中的一些启示
- 单片机—LED灯(二)
- hadoop
- JSON
- 在Mac中如何安装PHP7
- JS模板引擎---腾讯artTemplate的使用