divcss布局(一)

第一章了解div+css

1.1    什么是div,什么是css?

1.2    div+css缺点?

1.3    为什么使用div+css

第二章 div+css第一阶段

2.1    css四种引入方式

2.2    css选择器

(1)标签选择器

(2)id选择器(id唯一)

(3)类选择器(class选择器)

(4)交叉选择器

交叉选择器中间一定没有空格

(5)子代选择器/父子选择器/包含选择器

(6)群组选择器

(7)通用选择器

2.3    伪类选择器

2.4    css继承性和叠加性

css继承性:

子元素会继承父级元素的文字相关的样式;

css叠加性:

不同选择器给同一个元素加的不同的样式,能同时生效;

第三章 div+css第二阶段

3.1    css优先级

优先级排序:

继承样式<浏览器默认样式<通用选择器<标签选择器<类选择器<id选择器<后代选择器<行内样式

描述越精确,优先级越高。

3.2   块级元素、 行级元素、行内块级元素

a.块级元素:

(1)能设置宽高

(2)独占一行不和其他元素呆在同一行

常见块级元素:div、p、ul、li、h1-h6...

b.行级元素

(1)不能设置宽高

(2)能和其他元素呆在同一行

常见行级元素:a、span、strong、em、u...

c.行内块级元素/块内行级元素

(1)能设置宽高

(2)能和其他元素(行级元素、行内块级元素)呆在同一行

常见行内块级元素:img、表单(form)

3.3    css控制文字样式

浏览器中文字大小默认16px;

文字大小设置一般用px;

文字所在行高范围内垂直居中,可利用这个特性设置文字居中

font-weight (加粗)没有单位,例:font-weight:400;

取值范围是1-900,400是正常粗细,700为最常用的 加粗;

letter-spacing 字符间距;例如:letter-spacing:10px

3.4    网页开发三步:

a、根据内容选标签,将内容放到页面中

b、给元素加样式

c、给元素定位置

第四章 div+css第三阶段

4.1    盒子模型

(1)什么是盒子模型?

实例图:

在css中,盒子模型包括内容、内边距(填充)、边框、外边距组成;

4.2    内边距

(1)加内外边距不会影响内容的宽高;

例如:width=600px,表示内容宽度为600px,而盒子总宽为:边框边距*2+内容宽+左边距+右边距;

效果:

(2)padding 填充(内边距)

padding:20px;(上下左右

padding:20px  30px;(上下、左右

padding:20px  30px  40px;(上、左右、下

padding:20px 30px 40px 50px;(上、右、下、左(顺时针方向)

4.3    外边距

左右外边距累加,上下外边距合并(取最大值);

margin:20px;上下左右

margin:20px  30px;上下、左右

margin:20px  30px  40px;上、左右、下

margin:20px  30px  40px  50px;上、右、下、左(顺时针方向))

margin:0   auto;(上下外边距0,左右自动)是0的话可以不用加px单位;

只能让块级元素基于父布局水平居中;

4.4    全局reset、盒子宽高特点

(1)全局reset(清空默认内外边距)

因为通用选择器的优先级大于浏览器默认样式的优先级;

也可用群组选择器清空默认内外边距;

(2)盒子宽高特点

块级元素:默认宽度是100%,高度需要多高就是多高;

行级元素:默认宽度根据内容来定,高度需要多高就是多高,只能设置左右外边距不能设置上下外边距;

4.5    display元素转换

任何元素都可进行转换

(1)块级元素转行级元素:

display: inline;

(2)行级元素转块级元素:

display: block

行级元素转成块级元素,可设置宽高属性;

float: left;可以让块级元素排列在同一行

(3)转换成行内块级元素

display: inline-block;

(4)display: none;元素隐藏

4.6    overflow属性

overflow: hidden;溢出隐藏常用)

overflow:auto;自适应加滚动条常用

overflow:scroll;无论怎样都加滚动条

4.7    边框详解

边框:粗细 线条样式 颜色(三个属性,无序)

border:5px solid red;

border-width: 5px;粗细

border-color: red;颜色

border-style: solid;线条样式

soild 实线,dotted点状虚线,dashed虚线...

border-right: 2px yellow soild;单独设置一条边框;

border-top-color : red;单独设置一条边框颜色;

4.8    浮动float

(1)float可以让多个块级元素排列到同一行;

float: left;属性的元素会先往当前这一行最左边跑,如果跑到最左边,会从上一个行的最右边出来,继续向左跑;

(2)如果浮动元素的上一行是正常元素,那么这个元素是跑不上去的;

(3)一个正常元素在排列位置的时候会忽略掉他前面的浮动元素;

(4)如果浮动的一排元素父级元素宽度不够,最后的元素会被挤到下一排;

(5)如果子元素时浮动的,那么是撑不开父级元素的高度的;

解决方法:给布局加overflow:hidden;或者给父级元素一个固定高度;

(6)float: right;右浮动与左浮动原理相同;

4.9    float文字环绕效果

浮动元素是脱离文档流的;

利用 “一个正常元素在排列位置的时候会忽略掉他前面的浮动元素”这个特性时,文字不回被覆盖,从而实现文字环绕效果。


后续更多内容详见 divcss布局(二)

链接:www.jianshu.com/p/36b8acf649de


如有问题欢迎交流。

如转载请注明出处,谢谢!

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,502评论 1 85
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 1,090评论 0 8
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    hiuman阅读 216评论 0 1
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    poetries阅读 12,968评论 32 436
  • 每当别人问起“你最喜欢的作家”是谁的时候,我多数情况下都会抱着崇敬的心情告诉对方“伊坂幸太郎”,这个时候对方往往会...
    公子白洛阅读 209评论 13 0