Web-9月13日随笔
Posted lovels
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web-9月13日随笔相关的知识，希望对你有一定的参考价值。
通配符（*）选择器的利弊：
利：方便，省事 弊：会加大浏览器的负荷 （按需求进行选择）
list-style属性值：circle/disc/square/none（空心圆/实心圆/正方形/无）
ul跟p标签天生自带内外边距。
—.p标签中内容分别是汉字和英文是为什么会出现两种不同的结果。
范例：
<p>博客园首页（即网站首页）只能发布原创的、高质量的、能让读者从中学到东西的内容。</p>
<p>sdadasdasdasdasfasjfakfnjdkgfukahffuw</p>
效果：给p设置宽高后，第一个p中的文字自动换行； 第二个p中的英文超出了所设置的宽。
原因：因为浏览器在解析第二个p的时候，字母之间没有空格，所以会认为它是一个没写完的英语单词，所以不换行。
二.列表：
作用：做二级菜单和导航条
无序列表（ul） li（一列） ol（有序列表） dl（自定义列表） dt（自定义列表的小标题） dd（自定义列表的内容）
ul跟ol的区别：ol前面可以用type修饰样式；
三.外边距与内边距
外边距：margin，共四个属性值:top（上）right（右）bottom（下）left（左）
margin的属性值（简写）：1.margin：20px；（外边距的上，右，下，左四个方向都是20px；）
2.margin：10px 20px；（外边距的上下是10像素，左右是20像素）
3.margin：10px 20px 30px；（外边距的上下是10像素和30像素，左右是20像素）
4.margin：10px 20px 30px 40px ；（外边距的上是10像素，右是20像素，下是30像素，左是40像素）
5.margin-top：属性值 margin-right：属性值 margin-bottom：属性值 margin-left：属性值
padding同上；
一个元素实际占用的空间大小：width+border*2+padding*2+margin*2
盒子的真实宽度：width+border*2+padding-left+padding-right
盒子的真实高度：height+border*2+padding-top+padding-bottom
四.margin塌陷现象
范例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<title>margin塌陷现象</title>
<style>
.one{
width:"100px" ; height:"100px" ;
border:1px solid red; margin:150px; }
.two{ width:"100px" ; height:"100px" ;
border:1px solid red; margin:100px;}
</style>
</head>
<body>
<div class="one">
哈哈
</div>
<div class="two">
嘿嘿
</div>
</body>
</html>
解释：上下两个垂直分布的元素设置外边距时，较小的会塌陷到较大那边。
五.
块级元素的特点：1.可以设置宽高 2.margin可以随便用 3.独占一行，无论内容多少，不能与其他元素在一行显示。（div，h1-h6，p，ul，li，ol，dl，dt，dd，form等）
行内元素的特点：1.不可以设置宽高 2.内容的大小决定空间的大小 3.可以和其他元素在同一行显示 4.margin只能上下用，左右不能用。 （sapn，a，em，lable，strong，b，i，img）
行内块元素的特点：1.可直接设置宽高 2.margin可以随便用了 3.可以在同一行显示
六.display-inline(转行内元素，可以在一行显示了，但无法设置宽高，margin只能设置上下)
display-block（转块状元素，可以设置宽高，但独占一行，marign随便用）
display-inline-block（转行内块，可以在一行显示，可以设置宽高，margin随便用）
七.line-height（行高）设置字体的垂直位置。
一般情况下行高与高相同。
当是2的时候，line-height的值是2*font-size的大小 =（36px），默认字体大小是18px；
以上是关于Web-9月13日随笔的主要内容，如果未能解决你的问题，请参考以下文章