盒子模型CSS(重点)

边框border    


边框通常使用连写border:1px(边框大小) solid(实线或其他)  red(颜色)

border-collapse:collapse (合并边框)

内边距padding


padding:10px 上下左右都为10

padding:10px 20px  上下为10px 左右为20px

padding:10 20 30 上10 左右 20   下为30

padding:上 右  下  左

padding、border会撑开具有 width height的盒子 解决方法padding的计算

外边距margin


margin:0 auto (auto为自动填充)

相邻的两个外边距会合并(显示值大的外边距)

嵌套块元素垂直外边距的合并 解决办法:1用border隔开  2用padding隔开  3用overflow:hidden

版心和布局流程


1.确定页面版心

2.分析页面中的行块元素,以及每个模块中的列模块

3.制作HTML结构

3.CSS初始化,然后开始运用模型的原型,通过CSS+DIV进行布局来控制网页的各个模块

HTML+CSS学习笔记整理二的更多相关文章

  1. Deep Learning(深度学习)学习笔记整理(二)

    本文整理了网上几位大牛的博客,详细地讲解了CNN的基础结构与核心思想,欢迎交流. [1]Deep learning简介 [2]Deep Learning训练过程 [3]Deep Learning模型之 ...

  2. HTML+CSS学习笔记整理

    一.标签语义化(重点): 1.可以方便代码的阅读和维护 2.同时让网络爬虫更好的解析从而更好的分析其内容 3.更好的优化引擎 如何做到标签语义化:个人理解是,首先,网页的HTML主要作用在网页的结构上 ...

  3. htm5 css学习笔记整理

    点击链接后退页面: <a href="javascript:history.go(-1)">回到上一个网页</a> ——修改placeholder提示的样式 ...

  4. Struts2学习笔记整理(二)

    这里是重点. Action接口 struts2 的Action可以是POJO 为了让用户开发的Action更加规范struts2提供了一个Action接口 ActionSupport基类 Struts ...

  5. Deep Learning(深度学习)学习笔记整理系列之(二)

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

  6. Django学习笔记(二):使用Template让HTML、CSS参与网页建立

    Django学习笔记(二):使用Template让HTML.CSS参与网页建立 通过本文章实现: 了解Django中Template的使用 让HTML.CSS等参与网页建立 利用静态文件应用网页样式 ...

  7. CSS学习笔记

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

  8. Deep Learning(深度学习)学习笔记整理系列之(五)

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

  9. Yii框架学习笔记(二)将html前端模板整合到框架中

    选择Yii 2.0版本框架的7个理由 http://blog.chedushi.com/archives/8988 刚接触Yii谈一下对Yii框架的看法和感受 http://bbs.csdn.net/ ...

随机推荐

  1. SQL注入:宽字节注入

    了解GBK编码 尽管现在呼吁所有的程序都使用unicode编码,所有的网站都使用utf-8编码,来一个统一的国际规范.但仍然有很多,包括国内及国外(特别是非英语国家)的一些cms,仍然使用着自己国家的 ...

  2. 《高性能 Go 代码工坊》中译

    深入研究 Go 应用性能提升的英语系列文章,这里是中译 https://www.yuque.com/ksco/uiondt

  3. spring boot jsp里面的静态资源访问不到解决办法

    闲着没事写的小Demo 用到了jsp页面,里面有些静态资源, springboot 默认的静态资源的值有四个:Default: classpath:/META-INF/resources/,class ...

  4. 其他综合-CentOS 7 命令行显示优化

    CentOS 7 命令行显示优化 1.实验描述 通过 CentOS 7.6 的显示优化,为实现命令行显示提供良好视觉体验. [基于此文章的环境]点我快速打开文章 2.实验环境 使用软件的版本:VMwa ...

  5. Logback文件这么配置,TPS提高至少10倍

    来源:https://tinyurl.com/y5zbtgsq 阅读本文,你将了解到 日志输出到文件并根据LEVEL级别将日志分类保存到不同文件 通过异步输出日志减少磁盘IO提高性能 异步输出日志的原 ...

  6. Mysql基础知识--视图

    一.视图的操作 为了提高SQL语句的复用性和操作表的安全性,,MySQL数据库管理系统5提供了视图特性. 视图:本质上是一种虚拟表,其内容与真实的表相似,包含一系列带有名称的行和列数据.但是视图并不在 ...

  7. Kubernetes prometheus+grafana k8s 监控

    参考: https://www.cnblogs.com/terrycy/p/10058944.html https://www.cnblogs.com/weiBlog/p/10629966.html ...

  8. Spring Boot 引入外部yml配置文件

    当需要在springboot中引用其他的yml文件时,需要在application.yml里配置 spring:     profiles:         include: email,xmyb   ...

  9. 洛谷 P1440 求m区间内的最小值

    传送门 思路 由于数据范围很大,所以使用单调队列,和滑动窗口这道题类似 首先第一个数输出\(0\),因为第一个数之前没有数 然后通过样例我们发现,最后一个数并没有派上什么用场,所以循环\(n-1\)轮 ...

  10. Web协议详解与抓包实战:HTTP1协议-如何用Chrome的Network面板分析HTTP报文(1)

    一.Chrome 抓包:Network 面板 1. Network 面板 • 控制器:控制面板的外观与功能 • 过滤器:过滤请求列表中显示的资源 • 按住 Command (Mac)或 Ctrl (W ...