CSS基础学习(二) 之 width min-width max-width属性
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属性的更多相关文章
- 前端学习之路CSS基础学习二
CSS属性相关 样式操作: (1)width:为元素设置宽度 (2)height:为元素设置高度 ps:块儿级标签才能设置长宽行内标签设置长宽没有任何影响 p{ width: 30px; height ...
- CSS基础学习(一) 之 line-height 与 height 属性区别
官方定义: height:定义了了元素的高度.默认情况下,该属性订了 content area(内容区域) 的高度.如果box-sizing属性设置为 border-box,那么height就表示bo ...
- HTML&CSS基础学习笔记—创建列表
创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...
- Python入门基础学习 二
Python入门基础学习 二 猜数字小游戏进阶版 修改建议: 猜错的时候程序可以给出提示,告诉用户猜测的数字偏大还是偏小: 没运行一次程序只能猜测一次,应该提供多次机会给用户猜测: 每次运行程序,答案 ...
- Python基础学习二
Python基础学习二 1.编码 utf-8编码:自动将英文保存为1个字符,中文3个字符.ASCll编码被囊括在内. unicode:将所有字符保存为2给字符,容纳了世界上所有的编码. 2.字符串内置 ...
- Go基础学习(二)
数组[array] 数组定义[定义后长度不可变] 12 symbol := [...]string{USD: "$", EUR: "€", GBP: " ...
- jQuery基础学习(二)—jQuery选择器
一.jQuery基本选择器 1.CSS选择器 在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例 标签选择器 E { ...
- CSS基础学习 21.CSS居中总结
注意:*在IE中并不代表通配符的意思,是代表根元素的意思,所以为了匹配适应各种浏览器,进行页面初始化 <style> *{ margin:0; padding:0; } </styl ...
- Django基础学习二
今天继续学习django的基础 学习用户提交url如何获得返回值 1.首先需要在工程的urls文件定义指定的urls要路由给哪个函数 在这个例子中,我们定义home的urls路由给views里的tes ...
- 两天学会css基础(二)
接上一篇博客,还有css中的两个重要知识点没有说到,就是元素的浮动与定位. 第三部分:元素的浮动与清除 这部分的内容之前的博客已总结过.请查看css中的浮动与三种清除浮动的方法这篇文章. 浮动在网页中 ...
随机推荐
- LPVOID 没有类型的指针
可以将LPVOID类型的变量赋值给任意类型的指针,比如在参数传递时就可以把任意类型传递给一个LPVOID类型为参数的方法,然后在方法内再将这个“任意类型”从传递时的“LPVOID类型”转换回来. 示例 ...
- linux crontab详解 php开发相关
vi vi /etc/crontab 注意不是这么直接干的! 下面是内容 SHELL=/bin/bash PATH=/sbin:/bin:/usr/sbin:/usr/bin MAILTO=root ...
- Centos Linux 下Pycharm 安装
原文链接 :https://www.cnblogs.com/shaosks/p/9173806.html 可以通过浏览器访问http://www.jetbrains.com/pycharm/,选择需要 ...
- dataTransfer对象
HTML5拖拽的数据传输 虽然通过dragstart.drag和dragend事件实现了原生拖拽.但是这仅仅是拖拽,在IE6和IE7中还是有些拖拽问题,并且也没有实现数据的交换.为了实现数据的交换,I ...
- 图像分类(一)GoogLenet Inception_V1:Going deeper with convolutions
论文地址 在该论文中作者提出了一种被称为Inception Network的深度卷积神经网络,它由若干个Inception modules堆叠而成.Inception的主要特点是它能提高网络中计算资源 ...
- 关于for循环
1.普通for循环 (遍历数组的索引值(下标),边界可以自己划定) var arr = [10, 20, 30];for(var i=0; i<arr.length; i++) console. ...
- 【托业】【新东方全真模拟】03~04-----P5~6
❤ customer satisfaction survey 客户满意度调查 ❤ lose + 宾语:be lost ❤ superior (在品质上)更好的 ❤ be entitled to ...
- java框架之Struts2(4)-拦截器&标签库
拦截器 概述 Interceptor (拦截器):起到拦截客户端对 Action 请求的作用. Filter:过滤器,过滤客户端向服务器发送的请求. Interceptor:拦截器,拦截的是客户端对 ...
- 2019.04.13 python基础
第一节 主要讲python背景 没什么要注意的 了解记住概念就好 python官网 python.org 自带shell 可以运行python代码 在IDLE中怎么运行代码 新建文本 ...
- 让hive的表注释和字段注释支持中文
此处用的数据库类型为mysql.发现hive在初始化创建这些表的时候,大部分字段的字符集给设置成了latin1,然后collation设成了latin1_bin. 但是我们在hive中创建表时,表注释 ...