width

1. 设置元素内容区(content area)的宽度。

2. 如果box-szing属性设置为border-box,width表示border area的宽度,如下图

min-width

1. 设置元素的最小宽度。它可以避免元素的实际width的属性值比min-witdh更小的情况。

2. 当min-width值大于width或者max-width时,min-width值会覆盖其它两个值,如下图

max-width

1. 设置了元素的最大宽度。防止元素的实际宽度大于max-width

2. width大于max-width时,max-width会覆盖width

3. 当浏览器窗口宽度小于width时,浏览器会显示一个水平的滚动条来容纳页面,此时设置max-width可以阻止这种现象发生。

CSS基础学习(二) 之 width min-width max-width属性的更多相关文章

  1. 前端学习之路CSS基础学习二

    CSS属性相关 样式操作: (1)width:为元素设置宽度 (2)height:为元素设置高度 ps:块儿级标签才能设置长宽行内标签设置长宽没有任何影响 p{ width: 30px; height ...

  2. CSS基础学习(一) 之 line-height 与 height 属性区别

    官方定义: height:定义了了元素的高度.默认情况下,该属性订了 content area(内容区域) 的高度.如果box-sizing属性设置为 border-box,那么height就表示bo ...

  3. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  4. Python入门基础学习 二

    Python入门基础学习 二 猜数字小游戏进阶版 修改建议: 猜错的时候程序可以给出提示,告诉用户猜测的数字偏大还是偏小: 没运行一次程序只能猜测一次,应该提供多次机会给用户猜测: 每次运行程序,答案 ...

  5. Python基础学习二

    Python基础学习二 1.编码 utf-8编码:自动将英文保存为1个字符,中文3个字符.ASCll编码被囊括在内. unicode:将所有字符保存为2给字符,容纳了世界上所有的编码. 2.字符串内置 ...

  6. Go基础学习(二)

    数组[array] 数组定义[定义后长度不可变] 12 symbol := [...]string{USD: "$", EUR: "€", GBP: " ...

  7. jQuery基础学习(二)—jQuery选择器

    一.jQuery基本选择器 1.CSS选择器     在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例   标签选择器 E {                 ...

  8. CSS基础学习 21.CSS居中总结

    注意:*在IE中并不代表通配符的意思,是代表根元素的意思,所以为了匹配适应各种浏览器,进行页面初始化 <style> *{ margin:0; padding:0; } </styl ...

  9. Django基础学习二

    今天继续学习django的基础 学习用户提交url如何获得返回值 1.首先需要在工程的urls文件定义指定的urls要路由给哪个函数 在这个例子中,我们定义home的urls路由给views里的tes ...

  10. 两天学会css基础(二)

    接上一篇博客,还有css中的两个重要知识点没有说到,就是元素的浮动与定位. 第三部分:元素的浮动与清除 这部分的内容之前的博客已总结过.请查看css中的浮动与三种清除浮动的方法这篇文章. 浮动在网页中 ...

随机推荐

  1. 三、CSS语言

    CSS语言 1.概述:CSS (Cascading Style Sheets)是层叠样式表用来定义网页的显示效果.可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示 ...

  2. python全栈开发 * 01知识点汇总 * 180530

    一 python简介. 1.创始人:  吉多 .范罗苏姆  \   (Guido van Rossum). 2.时间  :  1989年. 3.主要应用领域  :  云计算 \  WEB开发  \   ...

  3. torch.utils.data.DataLoader使用方法

    数据加载器,结合了数据集和取样器,并且可以提供多个线程处理数据集.在训练模型时使用到此函数,用来把训练数据分成多个小组,此函数每次抛出一组数据.直至把所有的数据都抛出.就是做一个数据的初始化. 生成迭 ...

  4. MongoDB分片集群原理、搭建及测试详解

    随着技术的发展,目前数据库系统对于海量数据的存储和高效访问海量数据要求越来越高,MongoDB分片机制就是为了解决海量数据的存储和高效海量数据访问而生. MongoDB分片集群由mongos路由进程( ...

  5. Improved GAN

    https://www.bilibili.com/video/av9770302/?p=16 从之前讲的basic gan延伸到unified framework,到WGAN 再到通过WGAN进行Ge ...

  6. HTTP协议工作原理

    HTTP简介        超文本传输协议(HTTP:Hypertext Transport Protocol)是万维网应用层的协议,它通过两个程序实现:一个是客户端程序(各种浏览器),另一个是服务器 ...

  7. Vsftp搭建 for centos7

    [root@hys ~]# uname -a Linux hys 3.10.0-693.el7.x86_64 #1 SMP Tue Aug 22 21:09:27 UTC 2017 x86_64 x8 ...

  8. Date Calendar

    1 毫秒值概念 时间和日期的计算,必须依赖毫秒值获取当前日期的毫秒值:System.currentTimeMillis() 返回值long类型参数, 时间原点:公元1970年1月1日,午夜0:00:0 ...

  9. 从零开始一起学习SLAM | 点云平滑法线估计

    点击公众号"计算机视觉life"关注,置顶星标更快接收消息! 本文编程练习框架及数据获取方法见文末获取方式 菜单栏点击"知识星球"查看「从零开始学习SLAM」一 ...

  10. laravel----------如何优化laravel框架

    1.关闭debug (打开.env文件,把debug设置为false.) 2.缓存路由和配置(清除:php artisan config:clear  php artisan route:clear  ...