1.改变宽高范围

默认情况下，width和height设置的是内容盒的宽高

页面重构师：将psd文件（设计稿）制作为静态页面

衡量设计稿尺寸的时候，往往使用的是边框盒

CSS3中 box-sizing 可设置width height的设置对象，如contant-box  border-box

2.改变背景覆盖范围

默认情况下，背景大小和边框盒一样大

可通过background-clip进行更改范围大小

3.溢出处理

当内容过多超出盒子时，使用overflow处理

值：hidden 溢出部分隐藏

　　scroll 使用滚动条

　　overflow-x：scroll  或   overflow-y：scroll

　　auto 需要时才出现滚动条

4.断词规则

word-break，会影响文字在什么位置被截断换行

normal：普通。CJK(中日韩)字符（文字位置截断），非CJK字符（单词位置截断）

break-all：所有文字都在文字位置截断（英文单词字母会被截断）

keep-all：所有文字都在单词之间截断（中文没有空格，标点符号的话，就不会被截断）

5.空白处理

white-space:nowrap;  不换行

overflow:hidden;  溢出部分隐藏

text-overflow:ellipsis;  显示不全的地方使用...代替

CSS学习（9）块盒模型应用的更多相关文章

  1. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. css文档之盒模型阅读笔记

    前段时间抽空仔细阅读了w3c的css文档关于盒模型方面的一些基础知识.边读边记录了一些要点,在此做些整理,与大家分享,如有理解有误之处,请不吝指教. 1.综述 文档中的每个元素被描绘为矩形盒子.渲染引 ...

  3. 深入css布局篇(1) — 盒模型 & 元素分类

    深入css布局(1)-- 盒模型 & 元素分类     " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...

  4. CSS学习笔记——视觉格式化模型 visual formatting model

    CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...

  5. HTML和CSS前端教程05-CSS盒模型

    目录 1. CSS盒模型 1.1 元素的尺寸 1.2. 元素内边距 padding 1.3. 元素外边距 margin 1.4. 处理溢出overflow 1.5. 元素的可见性Visibility ...

  6. [浅谈CSS核心概念] CSS元素类型和盒模型

    元素类型 在CSS中,HTML标签元素分为三种类型: 块状元素 内联元素(也叫行内元素) 内联块状元素 它们之间的区别在于: 块级元素会独占一行,内联元素和内联块状元素则都会在一行内显示 块状元素和内 ...

  7. CSS 常用语法与盒模型分析

    CSS基础知识 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明 selector { property: value; property: value; ... property: va ...

  8. CSS的两种盒模型

    盒模型一共有两种模式,一种是标准模式,另一种就是怪异模式. 当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签,例如: <!DOCTYPE HTML PUBLI ...

  9. CSS Display属性与盒模型

    由于HTML流式文档的特性,页面布局往往是新手最为头疼的问题之中的一个. 每一个HTML元素都会渲染为一个Box,可分为inline Box和block Box. 依据display属性的不同.Box ...

  10. CSS布局定位基础-盒模型和定位机制

    1. 盒模型 2. 外边距合并 3. 定位机制 4. Float 5. Position:属性有哪些取值,它们的行为是什么? 无依赖绝对定位? 6. Display:常见属性值有哪些取值? 7. 对B ...

随机推荐

  1. centos7在命令界面使用命令可以执行，但在jenkins中输入命令报Chrome has crashed.

    问题:selenium.common.exceptions.WebDriverException: Message: unknown error: Chrome failed to start: ex ...

  2. Spring Boot整合Freemarker

    一.首先导入依赖 <!-- 添加freemarker模版的依赖 --> <dependency>     <groupId>org.springframework. ...

  3. mybatis一级缓存和二级缓存(二)

    注意事项与示例配置 一级缓存 Mybatis对缓存提供支持,但是在没有配置的默认情况下,它只开启一级缓存,一级缓存只是相对于同一个SqlSession而言.所以在参数和SQL完全一样的情况下,我们使用 ...

  4. 在 window 上卸载 mysql

    1.停止 mysql 服务 开始——>控制面板——>管理工具——>服务,停掉 MySQL 的服务 2.卸载安装包 控制面板-添加删除程序,找到MySQL,卸载(可能会有多个安装包,需 ...

  5. C语言 删除排序链表中的重复元素

    给定一个排序链表,删除所有重复的元素,使得每个元素只出现一次. 示例 1: 输入: 1->1->2输出: 1->2示例 2: 输入: 1->1->2->3-> ...

  6. 2019牛客多校第五场 G subsequence 1 dp+组合数学

    subsequence 1 题意 给出两个数字串s,t,求s的子序列中在数值上大于t串的数量 分析 数字大于另一个数字,要么位数多,要么位数相同,字典序大,位数多可以很方便地用组合数学来解决,所以只剩 ...

  7. my bug of VG algorithm

    def visibility_graph(series): g = nx.Graph() # convert list of magnitudes into list of tuples that h ...

  8. Ubuntu， 更新Sourses.list

    1.备份原文件 sudo cp /etc/apt/sources.list /etc/apt/sources_list.bak 2.加载文件 vim:vim sourses.list ubuntu d ...

  9. python 数组array的一些操作

    对一些特定大小的元素进行操作 1.将数组Arr中大于100的值都设定为100 Arr[Arr >100] = 100    利用array索引的内置 numpy.minimum(Arr, 100 ...

  10. 简单实现一个Unity3d的Timer

    数量使用的不太多,没有实现对象池. using System.Collections; using System.Collections.Generic; using UnityEngine; usi ...