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. [CQOI2012] 交换棋子 - 费用流

    有一个n行m列的黑白棋盘,你每次可以交换两个相邻格子(相邻是指有公共边或公共顶点)中的棋子,最终达到目标状态.要求第i行第j列的格子只能参与mi,j次交换. Solution 一个点拆三份,入点,主点 ...

  2. IDEA please configure web facet first

  3. 在IIS中配置申请的SSL证书

    第一步,右键服务器证书=>打开功能 第二步,右侧选择导入,将申请到的证书按窗体内容导入即可 第三步,右键需要加载证书的网站,选择编辑绑定=>类型选择https=>选择刚才导入的数字证 ...

  4. 智能手机中下一次被消灭的部件是电话卡和TF卡

    智能手机中下一次被消灭的部件是电话卡和TF卡. 侧滑实体键盘,实体拍照键,HDMI外接接口,实体切换双卡键,可拆卸后盖……这些都消亡了,被其更好的内在设计所取代.而电话卡和TF卡仍在使用.将来的智能手 ...

  5. 【网站】网站不能在QQ，微信中访问，申诉办法

    使用这个网站申诉即可 https://appeal.anquan.org/

  6. [一本通学习笔记] KMP算法

    KMP算法 对于串s[1..n],我们定义fail[i]表示以串s[1..i]的最长公共真前后缀. 我们首先考虑对于模式串p,如何计算出它的fail数组.定义fail[0]=-1. 根据“真前后缀”的 ...

  7. 显示目录文件命令 - ls

    1) 命令名称:ls 2) 英文原意:list 3) 命令所在路径:/bin/ls 4) 执行权限:所有用户 5) 功能描述:显示目录文件 6) 语法: ls 选项[-ald][文件或目录] -a 显 ...

  8. Binary Number（位运算）

    #include<bits/stdc++.h> using namespace std; int n; int getBits1(int n)//求取一个数的二进制形式中1的个数. { i ...

  9. Redis 数据结构的底层实现 (二) dict skiplist intset

    一.REDIS_INCODING_HT (dict字典,hashtable) dict是一个用于维护key和value映射关系的数据结构.redis的一个database中所有的key到value的映 ...

  10. django--关于部署scrapyd项目报错问题

    首先在同步两篇之前写过的博客,可能能用得到 1.https://www.cnblogs.com/lutt/p/10893192.html2.https://www.cnblogs.com/lutt/p ...