前端基础笔记06

来源：互联网发布：it就业培训班编辑：程序博客网时间：2024/06/05 11:53

1.sublime多行编辑：shift+鼠标右键下拉

2.list-style：none ；作用就是去li前的小点

3.最新文章练习总结：
*{margin：0；padding：0 }的重要性
li标签中嵌套a标签，设置字体要在li选择器中设置

4.alt+放大镜：缩小

二、补充

1 行高是可以继承的，如下123123会居中
<style>
.father {
width: 100px;
height: 200px;
background: red;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">123123</div>
</div>
</body>

2.行高的单位：

取值：
a 具体的像素值
b 使用em
em指的是当前标签设置的字体大小

比如当前字体大小是16px 那么2em是32px
当前字体大小是20px 那么2em是40px

如果没设置字体大小，默认是浏览器的字体默认大小

c 使用%百分号（与em类似，都是以当前标签的字体大小为基数）

d 可以不带单位
例如 line-height：1.5 （与em类似）

重点注意：
1 在设置行高的时候，如果单位是em或者%，那么将来行高会先计算
出结果以后再继承给子元素

2 在设置行高的时候，如果单位是没有，那么将来行高就会先继承给
子元素，然后再计算出行高

（例子见行高.html）

3.浏览器的补充

浏览器的默认字体大小是：

谷歌默认大小：16px

4.行高与font的关系

font：font-style font-weight font-size/line-height font-family

font-size处可以添加line-height

5. margin的两种特殊现象

5.1 外边距合并现象

如果有两个div上下排序，给上面一个div一个margin-bottom，
给下面div一个margin-top，那么这两个div将会发生合并现象，
合并以后的值取较大的那个（避免这种写法）

5.5 margin塌陷现象

如果一个大盒子包含一个小盒子，小盒子设置margin-top
大盒子会一起向下平移

解决方案：

1给大盒子加一个边框

2给大盒子设置一个overflow属性

3浮动也可以

二、浮动

1.问题：在页面上有两个盒子，一个盒子靠着屏幕左侧显示，一个靠着右侧显示？

开始想法是为div设置display：inline-block ；再设置第二个盒子的margin-right但是不可行，解决不了

那么这时候就用到了浮动，
作用：解决一行中显示多个盒子的问题（并且盒子位置可控）

以上问题可以用float：left； float：right解决

2.浮动的特点

标准流：就是浏览器默认摆放盒子的标准

2.1 浮动的元素会脱离标准流

2.2. 浮动的元素会覆盖在标准流的元素之上（在标准流不占位置）

2.3 同一个结构下，浮动找浮动，不浮动找不浮动


2.4 浮点显示的位置与原本不显示浮动的位置是对应的

2.5 浮动的重点：浮动的元素只会影响下面的元素，不会影响上面的元素

2.6 浮动的元素会改变显示方式：

不管元素是行内元素还是块状元素将来在显示的时候都会在同一行显示

浮动以后的元素可以设置宽高

总结：浮动以后的元素与行内块级元素显示方式一样

3浮动的案例

1.0 使用浮动完成页面的布局

2.0 制作导航

注意：使用a标签直接来制作导航是由问题的

1.0 导航与导航之间应该是列表的关系
所以如果想要这些通过html语义化表示出来，必须要用到ul标签

2.0 如果这些a标签你不用其他标签包裹，那么将来浏览器会将这些a标签
中的文字当做全部一起显示。SEO在查看页面的时候会认为这个页面进行作弊
就是进行了关键字的堆砌

3.0 文字环绕图片

<link href="css/" type="text/css" rel="stylesheet">

阅读全文

1 0