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. 基于Web的网络商城项目设计与实现【SSM+Bootstrap+Vue】

    [Spring+SpringMVC+MyBatis+Bootstrap+Vue] 演示:线路1  线路2 1.系统功能介绍 网上商城系统 是一个功能完善的在线购物系统 - ,主要为在线销售和在线购物服 ...

  2. AntDesign(React)学习-8 Menu使用 切换框架页内容页面

    本节实现一个点击左侧menu在右侧content切换页面效果,原始代码请从UMI学习-6开始看 1.在pages下添加两个组件,User,UserRole import React from 'rea ...

  3. 出现“无法在发送 HTTP 标头之后进行重定向”问题

    如题,在Response.Redirect之后会偶尔出现“无法在发送HTTP标头之后进行重定向”问题. 是因为,已经在出现错误的代码之前进行过一次重定向了.仔细检查代码即可. 解决方法:按照逻辑移除多 ...

  4. Appnium 环境搭建

    NodeJs 下载安装 npm install -g appium-doctor Java JDK jdk-8u241-windows-x64 添加环境变量:JAVA_HOME 在环境变量Path中添 ...

  5. Map merge

    将新的值赋值给map(如果不存在)或更新具有给定key的现有值. Map<Integer, Integer> map = new HashMap<>(); for (Integ ...

  6. 剑指offer 62. 二叉搜索树的第 k 个结点

    62. 二叉搜索树的第 k 个结点 题目描述 给定一棵二叉搜索树,请找出其中的第k小的结点.例如, (5,3,7,2,4,6,8)    中,按结点数值大小顺序第三小结点的值为4. 法一: 非递归中序 ...

  7. sendmail邮件服务器

    安装sendmail之前 我们要先搭建一个DNS服务器用来解析邮件 下图是配置好的DNS正向解析记录和反向解析记录 正向 反向 DNS配置好之后我们就来安装sendmail服务 然后再安装sendma ...

  8. Centos7 安装 GitLab 代码管理服务器

    一.安装依赖 yum -y install policycoreutils openssh-server openssh-clients postfix 二.启动postfix,并设置开机自启动 sy ...

  9. Git的基本使用 -- 分支管理

    查看分支 git branch 前面带 * 的为当前所在分支 创建分支 git branch 分支名 切换分支 git checkout 分支名 创建并切换到此分支 git checkout -b 分 ...

  10. k8s集群问题记录

    k8s集群问题记录 k8s学习方案 问题解决思路 主要学习路径: rancher(k8s)->rke->helm->kubectl->k8s(k8s中文api) 常见问题总结: ...