HTML+CSS的那些事儿（五） |
您所在的位置：网站首页 › 淘宝页面html代码 › HTML+CSS的那些事儿（五） |
HTML+CSS的那些事儿（五）
|
样式重置：在实际开发过程中，我们往往会新建一个单独的CSS文件（reset.css），用于对应HTML页面的样式重置。 line-height属性的不同值的区别 body { font-size: 16px line-height: normal; /* 默认。设置合理的行间距。其子级元素继承的是：同下所示 */ line-height: 15px; /* 行高为：15px ； 其子级元素继承的是：同下所示 */ line-height: 100%; /* 行高为：16*200%=32px ； 其子级元素继承的是：同下所示 */ line-height: 5em; /* 行高为：16*5=80px ； 其子级元素继承的是：该父级元素计算后的值，即如果其子元素的字体大小变为了10px，那么该子元素的行高还是为：其父级设置的80px */ line-height: 1.5; /* 行高为：16*1.5=24px ； 其子级元素继承的是：line-height的值，即如果其子元素的字体大小变为了10px，那么该子元素的行高为：10*1.5=15px */ }CSS @规则 /* @规则 @charset 设置样式表的编码 @import 引入其他样式文件 @media 媒体查询 @font-face 自定义字体 */favicon（设置HTML文档标题前面的 logo 小图标） 淘宝网 - 淘！我喜欢 //★★★模拟淘宝商城官网“HTML文档标题”前面的logo小图标。详见下图 ！！！base标签 // base标签(一个页面只能出现一个base标签) href="www.baidu.com/123/" target="_blank" 淘宝网 - 淘！我喜欢 //★★★base标签在HTML页面结构中所处的位置 //★★★实际href中资源的地址为：www.baidu.com/123/demo.jpg自定义图标 // 自定义图标，即一种文字（@font-face）———— 常用：阿里妈妈-iconfont在写HTML结构时，能少嵌套的就少嵌套 h标签的应用场景 // h标签的作用（有利于SEO） h1: 用于网页中的大标题，或者logo。（一个HTML页面中，h1标签只能用一次） h2：用于副标题，或者根据实际情况应用 h3：用于某个版块的标题（可以有多个） h4：用于某个版块的内部出现的标题 h5、h6：用于某个版块内部嵌套的另一个版块的标题等【注意】a标签与a标签以及块级标签嵌套的场景 盒模型的分类 盒模型： 1）标准盒模型 总宽度 = border(左右) + width + padding(左右) 总高度 = border(上下) + height + padding(上下) 2）IE混杂模型（怪异盒模型 --> box-sizing: border-box） 总宽度 = width 总高度 = height【注意】以图换字的两类方法 渐变背景色 /* 渐变背景色 1）谷歌浏览器、... 、IE 10+ background-image: linear-gradient(to right, #ff9000, #ff5000); 方向(可省略，默认：to bottom), 起始颜色, 结束颜色 2）IE 7、8、9（IE滤镜） filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1); 起始颜色 结束颜色(rgba) 渐变方向（1：从左往右；2：从上往下） */ /* CSS 3.0 中的 过渡效果 transition: background-color 0.3s; */calc() 函数 /* 1) width: 1000px; 2) width: calc(100% - 190px); --> 适用于：IE 9+ 父级的宽 - 190px ==> 1000px */【注意】"浮动"在对HTML页面布局时的灵活运用 rgba()函数 /* background-color: rgba(0, 0, 0, 0.5); 适用于：IE 9 及 IE 9+ background-color：#000\9; 适用于：IE 9 以下的浏览器认识（此处的"\9"可触发：CSS HACK） filter: alpha(opacity=30); 透明效果 */【注意】子级有浮动，父级一定要清浮动(“三件套”) 图片的居中对齐 /* 图片居中对齐的两种实现方式： 1）模拟单元格（表格中单元格内的内容都是垂直居中对齐的） display: table-cell; vertical: middle; 2）弹性盒模型（适用于：IE 10 和 IE 10+） display: flex; justify-content: space-around; 弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。 align-items: center; 均分垂直方向的间距 */CSS Sprites /* 雪碧图（CSS精灵） 1、缩小图标文件的大小 2、减少图片的http请求，减轻服务器的压力，节省带宽 利用：background-position 属性，如下： background: #ffe4dc url(../images/ico.png) 0 -572px no-repeat; 注意：设置“位置”的原理 */【注意】"相对定位"的应用（相对于自己原来的位置进行定位） 使 ul 列表中的所有 li 元素居中对齐 /* 当ul列表中的所有li元素需要在父级盒子内部居中显示时，不能用 float: left; 直接在ul中设置"text-align: center;", 再将li元素的display设置为inline-block，就可以实现居中显示。 */表格布局 /* 表格布局（table） 1、边框设置简便 2、单元格内容垂直居中 3、单元格的宽度会自动计算 */例如，实现淘宝商城中的以下效果，可以采用“表格”布局： .webp（图片格式） /* .webp 是谷歌开发的一种图片格式，只能用于在网站中显示，其体积相较于普通的图片格式小得多，且图片的清晰度不变 IE不支持、火狐在65以上的版本支持，谷歌支持。 可以通过JS判断用户所用浏览器的版本，以选择相应的图片格式。 */实现“词”换行 /* word-break: keep-all; 在空格的地方强制换行 */使用“伪元素”的注意事项 /* ::after 和 :after 区别 1) : 表示伪类 2）:: 表示伪元素（是 CSS 3.0 中的标准，IE_8不认识两个冒号，因此为了兼容IE_8，可以直接将伪元素写为 :before 或 :after ） */ |
【本文地址】
今日新闻 |
推荐新闻 |