css相关笔记（五）

1.字体的所有属性都可以被继承，但是字体的连写 会层叠掉你继承的字体属性，例如你在父容器中写了字体的属性，当你在自己的样式中使用 font属性连写时，会层叠掉父容器中的字体属性，就算是 font:18px normal;虽然没写全，但其它都是默认值，依旧会层叠掉你继承的字体属性，如果不想层叠父容器的中字体属性，最好单独写，例如 font-size:18px;


2.遇到一个奇怪的问题，如果父容器的行高与子容器的行高不一致时，子容器会被父容器挤下去一点，属于其它问题，所以就看看以后能不能知道,测试了，不是父容器设置了内边距,也不是子容器设置了外边距或内边距的原因，因该是其它问题。


3.脱离了标准文档流的元素 无法再使用margin：0 auto的方式实现居中了，可以使用
left:50%;margin-left:-自己的一半宽度;来实现居中，垂直居中也如此，没有脱离标准文档流的元素会占空间，而脱离了标准文档流的元素不占空间。


4.脱离了标准文档流的元素 无法再使用margin:0px auto的方式实现居中，连浮动元素也不能使用这种方式，浮动元素只能在其外面套一个盒子，让这个盒子使用margin:0px atuo来实现水平居中。


5.在浮动元素中使用继续脱离标准文档流的定位方式时，那些定位会以浏览器为基准，但是那些没有脱离标准流的定位方式，如相对定位依旧以自己为出发点。


6.给元素设置宽高，更利于其它元素定位时更加准确的找到该元素的位置，如果不给这个元素设置宽高而用padding的话，就会导致页面分辨率不同的使用 padding值会自增或自减的现象发生，不利于其它元素定位时准确的找到这个元素的位置。


7.子绝父相，不一定要是父子相邻，只要包含子元素的容器有非静态定位，无论是直接包含还是间接包含，都是实现子绝父相，但是子元素的出发点是离它最近的那个设置了非静态定位的容器。


8.标签的包含规范，html的结构标准，行内元素不能包含块儿，就算可以也不推荐，块儿级元素可以包含块儿级元素和行内元素，但是有语义的标签例如 p、caption、dt、h1-h6等标签不要包含块儿级元素，尽量包含行内元素。


9.规避脱离标准文档流（页面布局的基本原则）
◆尽量使用标准文档流
◆标准文档流解决不了的就使用浮动
◆浮动解决不了的就使用定位


10：margin的auto值
★ margin-left:auto;表示从左往右走 走到尽头就停下，于是子容器就停在了父容器的最右边。
★margin-right:auto;表示从右往左走 走到尽头就停下，于是子容器就停在了父容器的最左边。
★margin:0px auto;表示左边的外边距从左往右，右边的外边距从右往左，当两个对上了就是尽头了，停止，于是就居中了，子容器在父容器中水平居中显示了。
◆使用margin的atuo值就规避了脱离标准文档流的必要了，不然就需要使用 float和position让盒子很简单的跑到最左边或者最右边，使用position加margin来很简单的让盒子水平居中垂直居中;


11.vertical-align垂直对齐方式对inline-block行内块儿最敏感了，默认取值是baseline基线对齐，可以取上对齐top，下对齐bottom，中间对齐最常用middle。


12.css可见性
◆overflow:hidden;溢出隐藏
◆visibility:hidden;不显示但原位置依旧占用
◆display:none;不显示并且原来的位置也不占用
◆display:block;显示并且独占一行
◆display:inline-block;显示为行内块儿，一般用于转换行内块儿元素
★display的none和block常配合js使用。


13.网页的logo一般都会链接到主页去，这是常识，并且包含这个logo的盒子里面往往放的是一个页面只有一个的h1标签，并且会在这个标签里面放置链接到主页的超链接，有利于seo优化搜索引擎抓取更加友好。


14.页面优化 css内容移出的方式有两种，这么做是为了利于seo优化，在页面上不显示内容，只想要seo搜索引擎抓取。
◆text-indent:-5000px;通过缩进的方式不显示文字内容，页面的超链接依旧可以点
◆overflow:hidden;通过溢出隐藏的方式不显示文字内容，页面的超链接依旧可以点
★如果使用 display:none;或visibility:hidden;那么页面的超链接就无法点击了


15.使用css精灵图时，使用通过背景定位和设置高宽来实现的，但是精灵图中的小图太多了，很难知道你想要的小图在哪个位置、高宽为多少，这个时候就可以先用fireworks打开这张精灵图，然后通过fireworks中的图形截取工具，选择区域后 右键 ，选择右键菜单 【通过复制新建位图的方式】  ，之后查看属性，最后如果再想获取其它图片也是如此，如果获取不到，那么就要查看层了，记住要定位到第一层，因为第一层是 精灵图的层，只有在精灵图的层才能用图形截取工具那样做，其它层无效，制作css精灵图，打开fireworks新建一个文档，背景设置为透明，然后打开你想要截取小图的图片，使用图形截取工具截取那个小图，之后复制再黏贴到你自己新建的文档中，之后保存为png格式即可，其它操作步骤和使用精灵图是一样的。


16.属性选择器格式:标签[属性名=值][属性名]，例如input[type=text][id=username][class]，属性选择器的每对属性用中括号包含。


17.Emmet语法
◆> 表示 子 也就是其下面有什么元素  div>span   <div><span></span></div>
◆+ 表示 兄  也就是其后面有什么元素  div+span   <div></div><span></span>
◆[] 表示 其属性 也就是标签内有什么属性  div[id=box]   <div id="box"></div>
◆{} 表示 其内容  也就是标签对里面有什么内容  div{我是一个div}  <div>我是一个div</div>
◆*  表示 个数   也就是需要几个相同的标签 div*2 <div></div><div></div>
◆$ 表示序列号  也就是当你设置多个相同标签的时候用来区分   div[id=box$]{第$$个div}*2  <div id="box1">第01个div</div><div id="box2">第02个div></div>  
◆() 表示 组 也就是 可以给相同等级的元素分为一组  div>(span>img)+(span>a) <div><span><img /></span><span><a /></span></div>
◆^ 表示 上一级  也就是可以下一级标签返回到上一级   div>p^div       <div><p></p></div><div></div>

转载于:https://www.cnblogs.com/jwlLWJ2018/p/9158345.html