CSS尺寸样式属性
尺寸样式属性介绍
| 属性 | 值 | 含义 |
|---|---|---|
| height | auto：自动，浏览器会自动计算高度length：使用px定义高度%：基于包含它的块级对象的百分比高度 | 设置元素高度 |
| width | 同上 | 设置元素的宽度 |
height属性和width属性
- 接下来让我们进入
height属性、width属性实践，笔者用class属性值为.box，给div标签设置宽度和高度以及div标签背景颜色。 代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>尺寸样式属性</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
代码块
假设我们不给
div标签设置宽度，会变成什么样呢？那咱们就试试看哦。代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>尺寸样式属性</title>
<style>
.box{
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
结果图
- 为什么会这样呢？其实是这样的如果我们没有给
div标签设置宽度，div标签将会自动的占用父元素的百分百的宽度，注意的是：高度和宽度是不一样的哈，高度不会自动占用父元素的任何位置。 - 只有块级元素才可以设置宽高度。
CSS尺寸样式属性的更多相关文章
- 0010 CSS字体样式属性：font-size、font-family、Unicode字体、font-weight、font-style、综合设置、color、 text-align、line-height、text-indent、text-decoration、、、
CSS字体样式属性.调试工具 目标 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 使用常用的emment语法 能够使用开发人员工具代码调试 1.font字体 1.1 ...
- CSS常用样式属性
1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...
- css常用样式属性详细介绍
对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...
- CSS字体样式属性
font-size 字号大小 一般推荐使用相对长度(px ,em),不推荐使用绝对长度(in,cmm,mm,pt) font-family 字体 1.可以同时指定多个字体,中间用英文状态的逗号隔开,英 ...
- css内容样式属性
设置元素的最大高度.最小高度.最大宽度.最小宽度,用max-height.min-height.max-width.min-width. visibility:设置元素是否可见.visible和hid ...
- CSS之样式属性(背景固定、圆形头像、模态框)
CSS属性 一.宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. div {width: 1000px;backgr ...
- CSS 所有样式属性大复习
1.背景与前景 /*背景色,样式表优先级高*/ background-image:url(路径); /*设置背景图片(默认)*/ background-attachment:fixed; ...
- css clip样式 属性功能及作用
clip clip 在学前端的小伙伴前,估计是很少用到的,代码中也是很少看见的,但是,样式中有这样的代码,下面让我们来讲讲他吧! 这个我也做了很久的开发没碰到过这个属性,知道我在一个项目中,有一个功能 ...
- CSS哪些样式属性可以继承
不可继承的:display.margin.border.padding.background.height.min-height.max- height.width.min-width.max-wid ...
随机推荐
- Java11月9日的动手动脑
Java动手动脑 请自行编写代码测试以下特性(动手动脑): 在子类中,若要调用父类中被覆盖的方法,可以使用super关键字. 程序源代码: package yanzhengjicheng; class ...
- COGS 2095. 不平凡的引线
2095. 不平凡的引线 ★☆ 输入文件:firelead.in 输出文件:firelead.out 简单对比 时间限制:1 s 内存限制:256 MB [题目描述] 这里说的引线是炮 ...
- Java自动化测试框架-02 - TestNG之理论实践 - 纸上得来终觉浅，绝知此事要躬行（详细教程）
理论 TestNG,即Testing, NextGeneration,下一代测试技术,是一套根据JUnit 和NUnit思想而构建的利用注释来强化测试功能的一个测试框架,即可以用来做单元测试,也可以用 ...
- 并发新构件之CountDownLatch
CountDownLatch译为倒计时锁存器:JDK描述 :允许一个或多个线程等待直到在其他线程中执行的一组操作完成的同步辅助. A CountDownLatch用给定的计数初始化. awai ...
- SQL 存储过程示例讲解
create proc score_result ) --参数 as declare --定义变量@courseNo int, @testTime1 datetime, @avg int begin ...
- Zookeeper未授权访问测试
前言 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提 ...
- json::rapidjson工具
源码地址: https://github.com/Tencent/rapidjson 可跨平台使用.将 rapidjson-master\include\rapidjson 中的 rapidjson ...
- nginx::配置https/反向代理
vim /etc/nginx/nginx.conf user nginx; worker_processes ; error_log /var/log/nginx/error.log warn; pi ...
- java学习1-初始java程序
# 第一个简单示例 public class Hello { public static void main(String[] args) { System.out.println("Hel ...
- pycharm在进行debug时不小心把console关闭了，恢复console的办法
点击下图中右边的箭头就恢复了 此时可看到console已恢复