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. Windows中配置maven环境变量

    添加maven环境变量 添加新的系统环境变量:MAVEN_HOME 设置其值为你安装的目录:D:\IT_program\apache-maven-3.6.0 更新系统PATH 变量 添加变量值:%MA ...

  2. PP: GRU-ODE-Bayes: Continuous modeling of sporadically-observed time series

    From: KU Leuven; ESAT-STADIUS比利时鲁汶大学 ?? How to model real-world multidimensional time series? especi ...

  3. Linux下搭建PHP环境的参考文章小记

    之前也在Linux上安装过两次,但是当我再次需要安装时,还是很多不懂的地方,于是记下此篇,以防下次再费经心思找到不合适的文章,瞎折腾. 通过参考这几篇文章,成功的安装好了自己的PHP(LNMP)环境. ...

  4. 认识Flow（一）

    Flow 是 facebook 出品的 JavaScript 静态类型检查工具.Vue.js 的源码利用了 Flow 做了静态类型检查,所以了解 Flow 有助于我们阅读源码. 为什么用 Flow J ...

  5. JS对象简介

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 清除ios系统alert弹出框的域名

    清除ios系统alert弹出框的域名 <script> window.alert = function(name) { var iframe = document.createElemen ...

  7. AE 打开Shp文件

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  8. Win10 JDK 环境变量配置

    1.安装JDK 到指定的目录 2.配置环境变量 2.1   配置 CLASSPATH    .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar; 2. ...

  9. jQuery图片剪裁插件Cropper.js的使用

    插件下载地址及文档说明 1.引入必要的js和css核心文件 <link rel="stylesheet" href="../css/cropper.css" ...

  10. batchsize用法 以及实现前向运算的矩阵乘法方式

    batchsize用法 以及实现前向运算的矩阵乘法方式 待办 使用batchsize可以把矩阵缩小,采用矩阵乘法的形式可以一次计算多个经过神经网络的结果,然后通过交叉熵进行计算总的损失得到结果. 所以 ...