【day05】css

【【day05】css】的更多相关文章

一.盒模型(BoxModel) 1.width 宽度 2.height 高度说明: 块元素和有宽高属性的标记(img,input) 能设置宽度和高度,而行元素不能设置宽高 3.padding :内边距,内容到边框的距离 padding-top:上内边距 padding-right:右内边距 padding-bottom:下内边距 padding-left:左内边距缩写形式: padding:value; 四个方位相同值 padding:…

【08】css sprite是什么,有什么优缺点

[08]css sprite是什么?有什么优缺点? 概念:将多个小图片拼接到一个图片中.通过background-position和元素尺寸调节需要显示的背景图案. 优点: 减少HTTP请求数,极大地提高页面加载速度. 增加图片信息重复度,提高压缩比,减少图片大小. 更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现. 缺点: 图片合并麻烦. 维护麻烦,修改一个图片可能需要从新布局整个图片,样式. **…

【10】css hack原理及常用hack

[10]css hack原理及常用hack 原理:利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式.常见的hack有1)属性hack.2)选择器hack.3)IE条件注释 IE条件注释:适用于[IE5, IE9]常见格式如下  选择器hack:不同浏览器对选择器的支持不一样 /***** Selector Hacks ******/ /* I…

【01】CSS规范

[01]CSS规范 []https://drafts.csswg.org/indexes/(下图) https://www.w3.org/TR/2011/REC-CSS2-20110607/ https://www.w3.org/wiki/CSS [] https://developer.mozilla.org/en-US/docs/Web/CSS **…

【04】 CSS开发注意事项

[04] CSS注意事项 1. 页面编码规范 1.1. 统一使用 UTF-8 编码,用@charset "utf-8"指定页面编码. 1.2. 全局字体设置: windows 7系统:微软雅黑 Arial: windows XP及以下:新宋体,宋体,Arial MAC默认字体:Helvetica Neue和Helvetica Hiragino Sans GB. font-family:"Microsoft Yahei","Hiragino Sans GB&…

【01】CSS制作的图形

[01]CSS制作的图形绘制五角星: 通过border绘制三角形.然后通过transfrom来旋转35度. 绘制对称的图形,最后绘制顶部的三角形即可. 元素本身,加上:before和:after. 绘制爱心: 矩形,加圆角,加旋转. 绘制倒8: 显然是:三个角是圆角.然后旋转. 绘制开心笑: 四个角圆角.然后右border-right为透明即可. 代码如下: <!DOCTYPE HTML> <html>…

【荐】CSS实现漂亮实用带箭头的流程图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><head><title>[荐]CSS实现漂亮实用…

【转载】CSS 伪类-:before和:after

:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下: #example:before { content: "#"; color: red; } #example:after { content: "$"; color: red; } 这段代码会在#example元素内容之前插入一个'#',以及在内容之后添加一个'$',插入的行内元素是作为#example的子元素,效…

【经验】css

1.父元素overflow:hidden,当父元素大小减小到不容纳子元素时,会出现滚动条.2.input的盒模型尺寸基准是content-box,它的宽度将是以width-border计算,也就是说一个设定width:100px;border:5px solid;的input,其宽度将是90px.3.position:relative 对display:表格类是无效的.http://www.w3.org/TR/CSS21/visuren.html#choose-position 中有说明.4.3…

【转】CSS中的浮动和清除浮动

以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示: 文字环绕效果但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在,在inline-block出来之前,浮动大行其道.直到inline-block出来后,浮动也有它自己独特的使用场…