前面部分笔记丢失(呜呜有机会补)

一、盒子模型

1.4表格的细线边框

  • border-collapse: collapse;表示相邻边框合并在一起。

1.5边框会影响盒子的实际大小

  • 测量时不测边框。

1.6内边距padding

  • padding-left:20px; padding-bottom: 20px;。
  • 复合属性(都记住)

1.7padding影响盒子的大小

  • 盒子有了高和宽,此时再指定内边距,会撑大盒子。
  • 如果盒子没有高/宽的属性,则padding不会撑大盒子。

 1.8外边距margin

  • margin-left: 30px;。
  • 复合属性和padding一样。

1.9外边距典型应用

  • 可以让块级盒子水平居中,必须满足条件:必须指定了宽度,左右外边距都设置为auto。.header{width:960px; margin: 0 auto;}。
  • 常用margin: 0 auto;。
  • 行内元素或者行内块元素水平居中给其父元素添加text-align: center即可。

1.10外边距合并

  • 嵌套块元素垂直外边距的塌陷
  • 还有其他方法,例如浮动、固定、绝对定位等。

1.11清楚内外边距

  • 网页元素自带默认内外边距,不同浏览器默认值不同。
  • 清除内外边距:
  • 行内元素尽量只设置左右内外边距。

 1.12圆角边框

  • border-radius: length;

1.13盒子阴影

  • box-shadow: h-shadow v-shadow blur spread color inset; (默认outset,写outset阴影直接失效,因此若想设置外阴影则不用写)。

1.14文字阴影

  • text-shadow: h-shadow v-shadow blur color;

20号CSS学习的更多相关文章

  1. 6号css学习小记

    一.overfloat属性:(四个值) visible :默认值.内容不会被修剪,会呈现在元素匡之外. hidden:内容会被修剪,并且其余内容是不可见的. scroll :内容会被修剪,但是浏览器会 ...

  2. HTML与CSS学习记录

    title: HTML与CSS学习记录 toc: true date: 2018-09-10 14:04:59 <HTML与CSS进阶教程读书笔记> HTML基础知识 HTML与XHTML ...

  3. CSS 学习手册

    目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...

  4. 给 Web 前端开发人员推荐20款 CSS 编辑器

    CSS 和 HTML,JavaScript 是网页的基础,作为前端开发人员,对这三者都要很熟悉.特别是未来流行全栈开发的时代,每项技术都是你知识结构中必要的一个节点. 在开发中,选择好工具是非常重要的 ...

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

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

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

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

  7. 说说CSS学习中的瓶颈

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

  8. CSS学习小记

    搜狗主页页面CSS学习小记 1.边框的处理   要形成上图所示的布局效果,即,点选后,导航下面的边框不显示而其他的边框形成平滑的形状.相对于把导航的下面边框取消然后用空白覆盖掉下面搜索栏的边框比较而言 ...

  9. CSS学习中的瓶颈期深入分析

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

  10. CSS学习(一)

    /*</br> * color</br> * background-color background-image background-repeat background-po ...

随机推荐

  1. Java SE 23 新增特性

    Java SE 23 新增特性 作者:Grey 原文地址: 博客园:Java SE 23 新增特性 CSDN:Java SE 23 新增特性 源码 源仓库: Github:java_new_featu ...

  2. 靠着这篇笔记,我拿下了16k车载测试offer!

      如何写简历 个人技能 个人技能一般不要超过10条,一般在8条内. 一.测试流程和技术 1.熟悉车载系统研发和测试流程,能独立编写各种测试文档. 2.熟悉车载系统测试用例设计思路,能独立编写仪表和车 ...

  3. SQL通用语法与分类

    通用语法 1.SQL可以单行或多行书写,以分号结尾. 2.MySQL数据库的SQL语句不区分大小写,关键字建议使用大写. 3.注释 1)单行注释: -- 注释内容  或 # 注释内容(MySQL特有) ...

  4. SXYZ-6.28训练赛

    今天上午出中考成绩,所以下午打了一场训练赛,只有两个小时,没有昨天毒瘤,但也很毒瘤(还是模拟赛好) 关于中考可以看我的中考游记 (为了保护隐私,以后都把姓名涂掉) 为什么还是倒数啊~ T1 binar ...

  5. 【赵渝强老师】SQL的字符函数

    字符函数,顾名思义,操作的就是字符串.通过下图,我们来了解一下Oracle的字符函数. 一.大小写控制函数 lower.upper.initcap select lower('Hello World' ...

  6. 从SQL Server过渡到PostgreSQL:理解模式的差异

    从SQL Server过渡到PostgreSQL:理解模式的差异 前言 随着越来越多的企业转向开源技术,商业数据库管理员和开发者也逐渐面临向PostgreSQL迁移的需求. 虽然SQL Server和 ...

  7. Linux-USB驱动笔记-Gadget Function驱动

    1.前言 在Linux-USB驱动笔记(四)–USB整体框架中有説到Gadget Function驱动,下面我们来具体看一下. Gadget Function就是指设备的功能,比如作为U盘,需要文件存 ...

  8. android IO Prefetch源码分析

    I/O Prefetcher是高通本身提供的一套优化方案,可以用在Android手机App冷启动的时候.本文基于android Q 主要分libqti-iopd.vendor.qti.hardware ...

  9. GLSL利用SDF进行矩形绘制公式推导

    简单记录一下关于SDF绘制矩形的公式推导,因为我们在iq的SDF代码中,给的直接是最后的推导结果,对它是怎么得来的,还是有点困惑. //这是利用sdf绘制矩形 float sdBox( in vec2 ...

  10. os.environ["CUDA_DEVICE_ORDER"] = '0'

    这个总结来自:博客 os.environ["CUDA_DEVICE_ORDER"] = "PCI_BUS_ID" # 按照PCI_BUS_ID顺序从0开始排列G ...