CSS块级-内联元素,盒子模型
CSS元素
元素分类和区别
常用的块状元素有:
<div>、<p>、<h1>~<h6>、<ol>、<ul>、<li>、<dl>、<dt>、<table>、<form>
常用的内联元素有
<a>、<span>、<i>、<em>、<strong>、<label>
常见的内联块状元素有
<input>、<img>
区别
标签类别 | 特点 |
---|---|
块状元素 | 1.独自占据整一行 2.可以设置宽高(默认是父标签的100%) |
行内元素 | 1.所有的内联元素在一行内显示 2.不可以设置宽高 |
行内块元素 | 1.在一行内显示 2.可以设置宽高 |
常见属性
display
用于控制HTML元素的显示效果。
值 | 意义 |
---|---|
display:"none" | HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
display:"block" | 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。 |
display:"inline" | 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。(可以在一行内显示 ,可以设置宽高) |
display:"none"与visibility:hidden的区别:
visibility:hidden: 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
display:none: 可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
display与line-height
一般用于a标签和span标签
文字垂直居中
display:inline-block;
height:40px;
line-height:40px;
line-height是行高 height是高度 字体的行框高度是根据字体的font-size决定
盒子模型
padding(内填充)
#单个方向设置
padding-top:10px;
padding-right:3px;
padding-bottom:50px;
padding-left:70px;
#四周设置
padding:100px
padding: 5px 10px 15px 20px;
border(边框)
边框三要素:粗细 线性样式 颜色
/*1像素实线且红色的边框*/
border: 1px solid red;
border-width:1px 2px:
border-top-width:2px;
/*上:实现 右:点状 下:双线 左:虚线*/
border-style: solid dotted double dashed;
border-color:red;
清除默认边框
border:none;
border:0;
input清除样式
border:0;
#清除外线
outline:none;
margin(外边距)
特点
水平叠加,垂直合并
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
/*推荐使用简写*/
margin: 5px 10px 15px 20px;
/*顺序:上右下左*/
/*常见的居中*/
margin: 0 auto;
清除默认外边距
margin:0
清除列表默认样式
list-style:none
CSS块级-内联元素,盒子模型的更多相关文章
- HTML元素分类 块级元素 内联元素 块级内联元素
概述 HTML中存在许多元素,如<h1>,<p>,<a>,<block>,<image>,这些元素可分为三类,依次是块级元素,内联元素,块级 ...
- [HTML5]块和内联元素的嵌套
块元素可以包含块或内联元素,但是内联元素只能包含其他内联元素. <!-- 无效代码! :-( --> <strong> <p>你不应该把p元素放在 "st ...
- CSS 中的内联元素、块级元素以及display的各个属性的特点
CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...
- CSS 中的内联元素、块级元素、display的各个属性的特点
CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...
- CSS基础:内联元素
简介 内联元素由于涉及到文本字体,读写方向,汉字和字母差异等诸多方面的影响,因此其盒模型比块级元素更加复杂,对于内联非替换元素,比如一行文本,主要由以下几种框构成: "em 框", ...
- html/css解决inline-block内联元素间隙的多种方法总汇
序 display有几种属性:inline是内联对象,比如<a/> . <span/>标签等,可以“堆在一起”显示,宽高由内容决定,不能设置:block是块对象,比如<d ...
- CSS文档流与块级元素和内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- CSS文档流与块级元素和内联元素(文档)
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...
- CSS文档流、块级元素、内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
随机推荐
- 指定路径批量将xls转换成csv
PS : 用到spire库,.net控制台应用程序 其实本来没打算写这个工具的,只是最近需要用到,手头上正好没有这样的工具,那么怎么办,写呗! 其实说白了就是省事,策划想怎么玩,把表把工具丢给他,省得 ...
- 五、docker-compose开锋(docker 三剑客)
前言 终于写到docker-compose了,其实我最开始接触docker的时候,是因为一个开源项目需要用docker 环境和docke-compose 所以我最先接触的是docker-compse ...
- [考试反思]0714/0716,NOIP模拟测试3/4
这几天时间比较紧啊(其实只是我效率有点低我在考虑要不要坐到后面去吹空调) 但是不管怎么说,考试反思还是要写的吧. 第三次考试反思没写总感觉缺了点什么,但是题都刷不完... 一进图论看他们刷题好快啊为什 ...
- LNMP+Redis架构部署
工作机制 L(Linux)N(Nginx)M(Mysql)P(PHP)架构想必大家都知道,LNMP架构主要作用是让前端服务与后端存储以及后端的一下服务进行连接起来,来实现php程序的动态请求. 而今天 ...
- css的块级元素和行级元素
块级元素 概念: 每个块级元素都是独自占一行. 元素的高度.宽度.行高和边距都是可以设置的. 元素的宽度如果不设置的话,默认为父元素的宽度(父元素宽度100%) <address>/ ...
- linux/ubuntu下最简单好用的python opencv安装教程 ( 解决 imshow, SIFT, SURF, CSRT使用问题)
希望这篇文章能彻底帮你解决python opencv安装和使用中的常见问题. 懒人请直奔这一节, 一条命令安装 opencv 使用python-opencv常用的问题 在linux中使用python版 ...
- Spring Cloud gateway 七 Sentinel 注解方式使用
Sentinel 注解支持 @SentinelResource 用于定义资源,并提供可选的异常处理和 fallback 配置项. @SentinelResource 注解包含以下属性: value:资 ...
- jenkins里的定时构建
1. 定时构建语法:* * * * * (五颗星,多个时间点,中间用逗号隔开)第一个*表示分钟,取值0~59第二个*表示小时,取值0~23第三个*表示一个月的第几天,取值1~31第四个*表示第几月,取 ...
- requests模块发送带headers的Get请求和带参数的请求
1.在PyCharm开发工具中新建try_params.py文件: 2.try_params.py文件中编写代码: import requests#设置请求Headers头部header = {&qu ...
- 领扣(LeetCode)错误的集合 个人题解
集合 S 包含从1到 n 的整数.不幸的是,因为数据错误,导致集合里面某一个元素复制了成了集合里面的另外一个元素的值,导致集合丢失了一个整数并且有一个元素重复. 给定一个数组 nums 代表了集合 S ...