1 行高

◆浏览器默认文字大小

浏览器默认文字大小:16px

行高:是基线与基线之间的距离

行高=文字高度+上下边距

一行文字行高和父元素高度一致的时候,垂直居中显示。

行高的单位

总结:单位除了像素以为,行高都是与文字大小乘积。

总结:不带单位时,行高是和子元素文字大小相乘,em和%的行高是和父元素文字大小相乘。行高以像素为单位,就是定义的行高值。

◆推荐行高使用像素为单位。

盒子模型

边框  border

Border-top-style:  solid   实线

dotted  点线

dashed  虚线

Border-top-color   边框颜色

Border-top-width   边框粗细

边框属性的连写

特点:没有顺序要求,线型为必写项。

边框合并   border-collapse:collapse;

获取焦点

label  for  id      获取光标焦点

内边距

Padding-left   |   right    |  top  |  bottom

padding连写

Padding: 20px;   上右下左内边距都是20px

Padding: 20px 30px;   上下20px   左右30px

Padding: 20px  30px  40px;   上内边距为20px  左右内边距为30px   下内边距为40

Padding:  20px  30px   40px  50px;   上20px 右30px  下40px  左  50px

内边距撑大盒子的问题

影响盒子宽度的因素

内边距影响盒子的宽度

边框影响盒子的宽度

盒子的宽度=定义的宽度+边框宽度+左右内边距

◆继承的盒子一般不会被撑大

包含(嵌套)的盒子,如果子盒子没有定义宽度,给子盒子设置左右内边距,一般不会撑大盒子。

外边距

margin-left   | right  |  top  |  bottom

外边距连写

Margin: 20px;    上下左右外边距20PX

Margin: 20px 30px;   上下20px  左右30px

Margin: 20px  30px  40px;     上20px  左右30px   下  40px

Margin: 20px  30px   40px  50px; 上20px   右30px   下40px  左50px

垂直方向外边距合并

两个盒子垂直一个设置上外边距,一个设置下外边距,取的设置较大的值。

嵌套的盒子外边距塌陷

解决方法:  1  给父盒子设置边框

2给父盒子overflow:hidden;   bfc   格式化上下文

http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

Css学习(三)的更多相关文章

  1. css学习归纳总结(三) 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

  2. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  3. css学习归纳总结(一) 转

    原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...

  4. css学习归纳总结

    来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...

  5. html+css学习总结

    HTML与css学习总结 一:html概念 1. html是一种描述网页的语言,并不是计算机语言这要分清楚:标记语言是运用一套标记标签描述网页的: 注意点: ①标签字母都要小写,标签一般都是成对出现, ...

  6. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  7. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  8. HTML+CSS学习笔记(2) - 认识标签(1)

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  9. HTML+CSS学习笔记(1) - Html介绍

    HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...

随机推荐

  1. 关闭MongoDB服务的几种方法

    MongoDB 提供几种关闭服务的命令,具体为以下: 一 使用 Crtl+C 关闭 [mongo@redhatB data]$ mongod --dbpath=/database/mongodb/da ...

  2. MySQL Network--Localhost与127.0.0.1的差异

    localhost为本地服务器,而127.0.01为本机地址.在使用localhost时不经过网卡传输,不受网络防火墙和网卡相关的限制,访问localhost不会被解析成ip地址,不会占用网卡和网络资 ...

  3. 使用patroni 解决hasura graphql-engine pg 数据库ha的问题

    环境准备 机器pg 数据库地址修改为haproxy 的ip地址,端口是haproxy的tcp 端口,配置比较简单 hasura graphql-engine docker-compose versio ...

  4. 怎样解题 (G. 波利亚 著)

    第一部分 (已看) 目的 1. 帮助学生 2. 问题,建议,思维活动 3. 普遍性 4. 常识 5. 教师和学生,模仿和实践 主要部分,主要问题 6. 四个阶段 7. 理解题目 8. 例子 9. 拟订 ...

  5. DOS命令之at命令详解

    AT命令是Windows XP中内置的命令,它也可以媲美Windows中的“计划任务”,而且在计划的安排.任务的管理.工作事务的处理方面,AT命令具有更强大更神通的功能.AT命令可在指定时间和日期.在 ...

  6. ML(6)——改进机器学习算法

    现在我们要预测的是未来的房价,假设选择了回归模型,使用的损失函数是: 通过梯度下降或其它方法训练出了模型函数hθ(x),当使用hθ(x)预测新数据时,发现准确率非常低,此时如何处理? 在前面的章节中我 ...

  7. 自建mail服务器之二:hmailserver

    具体参考: http://blog.xuite.net/sendohshih/blog/41958216-3%E5%88%86%E9%90%98%E8%BC%95%E9%AC%86%E6%93%81% ...

  8. 1、Zookeeper安装及问题与集群

    1.下载zookeeper.tat.gz压缩包 2.解压 tar –xvf file.tar //解压 tar包 tar -xzvf file.tar.gz //解压tar.gz tar -xjvf ...

  9. Anaconda 安装 Python 库(MySQLdb)的方法-(转)

    安装python库的过程中,最重要的地方就是版本需要兼容.其中操作系统为64位,Python为2.X 64位,下载安装文件的时候也要注意版本匹配.其中文件名中包含的cp27表示CPython 2.7版 ...

  10. 螺旋矩阵 II

    给定一个正整数 n,生成一个包含 1 到 n2 所有元素,且元素按顺时针顺序螺旋排列的正方形矩阵. 示例: 输入: 3 输出: [ [ 1, 2, 3 ], [ 8, 9, 4 ], [ 7, 6, ...