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. centos7 部署elasticsearch

    环境: 系统:centos7.3 版本:elasticsearch6.2.3 head版本:https://codeload.github.com/mobz/elasticsearch-head/zi ...

  2. centos7升级自带的php5.4版本到php5.6

    history命令历史 8 yum provides php #自带的只有5.4版本 9 rpm -Uvh https://mirror.webtatic.com/yum/el7/epel-relea ...

  3. 数据库连接池——C3P0

    定义: 本质上就是个容器(集合)存放数据库连接的容器.当系统初始化以后,容器被创建,容器中就会申请一些连接对象.当用户来访问的数据库的时候,从容器中取连接对象,用户用完之后归还. 使用方法: 标准接口 ...

  4. Using Elixir Dynamic Supervisors

    转自: https://blog.smartlogic.io/elixir-dynamic-supervisors/ I have been working on my side project Gr ...

  5. sqler sql 转rest api 数据校验的处理

    早期版本(2.0 之前)使用rules 进行数据校验处理,2.0 之后进行了修改使用 validators,这样更加明确 参考格式   addpost {    // if any rule retu ...

  6. UWA 转载

    性能优化,进无止境-内存篇 https://blog.uwa4d.com/archives/optimzation_memory_1.html https://blog.uwa4d.com/archi ...

  7. Unity3d插件开发与SDK对接实战 学习

    c++: 注意x86/x64,vs2015. #include "stdafx.h" extern "C" { int Add(int a, int b) { ...

  8. powerdesigner16.5 破解

    powerdesigner16.5 破解 方法: 破解方法 1.将下载下来的PowerDesigner165_破解文件.rar进行解压,之后找到pdflm16.dll破解文件,并将pdflm16.dl ...

  9. git和gulp使用

    git push origin master/chunxiong git remote -v git merge chunxiong working tree:就是你所工作在的目录,每当你在代码中进行 ...

  10. mysql创建部分索引

    mysql中,字符串如何建立索引的(本文中截取一部分) 只对字符串的前几个字符进行索引.通过字符串的前几个字符我们已经能大概排序字符串了,剩下不能排序的可以通过遍历进行查找啊,这样只在B+树中存储字符 ...