前端学习-CSS行内元素-块元素-行内块元素

最新推荐文章于 2022-07-26 15:12:52 发布
VIP文章 最新推荐文章于 2022-07-26 15:12:52 发布
阅读量228 收藏
点赞数
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Corgi_gg/article/details/122413539
版权

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        /* 行内元素的盒模型

        行内元素不可以设置宽度并高度但不独占一行

        块元素可以设置宽度与高度但是需要独占一行

        行内块元素可以设置宽度与高度并不需要独占一行

        */

        a{

            width: 200px;

            height: 200px;

            background-color: blue;

            /* display 设置元素显示的类型 块标签行内元素 */

            /* display: inline; */

            /* 块元素 */

            /* display: block; */

            /* none方式直接隐藏并取消原来的位置 */

            /* display: none; */

            /* 行内块元素 */

            display: inline-block;

            /* 将元素设置成为一个表格 */

            /* display:table; */

            /* 设置元素显示的形式  页面正常模式显示 */

            /* visibili

最低0.47元/天 解锁文章
Corgi_gg
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端基础-CSS标签的显示模式
01-08
标签的显示模式（重点） div和span标签 ​ 1.样式完全相同，标签不同，显示的结果完全不同 ​ 2.每个div会独占一行，多个span会并列一排 ...3.行内的块元素 特点：只能设置宽和高，不能换行显示—img input
Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt
07-30
①一行上可以有多个行内块元素 中间有空隙（行内元素特点） ②默认宽度就是他本身内容的宽度（行内元素特点） ③宽高 高度 外边距 内边距可以控制（块级元素特点） 元素显示模式的转换 （1）行内元素转块级元素 ...
块元素与行内元素（布局设置常用）
comegoing_xin_lv的博客
07-26 571
块元素与行内元素，盒子模型，常见错误
行内元素和块元素以及行内块元素的特点
MrXiec的博客
08-23 854
块级元素 块元素会独自占据一整行，或者多行，可以任意设置其大小尺寸，是用于搭建网页布局的必须部分，使网页结构更加紧凑合理。 特点： 1.总是另起一行（特立独行） 2.可以设置其宽度、高度，内外边距 3.在不手动设置宽度的情况下，宽度默认为所在容器的100%（即容器宽度） 4.可以容纳行内元素和其他块元素。 常见的块元素：<div>/<h1>~<h6>/<p>/<ul>/<table>等，其中<div>是最常用最典型的块级元素
Web前端，CSS中关于块级元素、行内元素、行内块元素、元素显示模式转换、CSS特性继承性和层叠性、普通导航和五彩导航的制作
星辰迷上大海的博客
04-29 1426
如何使用HTML、CSS制作简单的导航和五彩导航
前端知识汇总【HTML篇，关于块级元素、行内元素、行内块元素】
qq_44810886的博客
04-14 1267
牛客网刷题总结 菜鸟笔记… 1.块级元素 块级元素：块级大多为结构性标记 常用的块级元素 标签名 标签含义 h1-h6 标题 hr 水平分割线 p 段落 div 文档分区 ul 无序列表 ol 有序列表 dl 定义列表 table 表格 form 表单 不常用的：address，center：地址文字；pre：预格式化；blockquote： 段落缩进前后5个字符；marquee滚动文本 块级元素特点： 1.总是从新的一行开始 2.高度、宽度、外边距
前端的块级元素与行内元素
m0_69639625的博客
05-14 922
块级元素:div、p、h1-h6、br、ol、ul 行内元素:a、span、strong、b、em(斜体)、img、input、select（下拉列表） 块级元素的自带特性: 1.从新的一行开始（自动换行），垂直向下 2.高度、宽度、margin（外边距）、及padding（内边距）都可以设计。 3.宽度默认为100% 4.可以包含行内元素 行内元素的特性: 1.和其他元素都在一行。 2.高度、宽度不可设置 3.行内元素不可包含块级元素 演示代码: <!...
前端开发三件套HTML&CSS&JavaScript
最新发布
02-23
1HTML常见文本标签 2HTML属性 3HTML块元素与行内元素 4HTML表单 2.CSS 5CSS导入方式 6CSS选择器 7CSS常见属性 8CSS盒子模型 9CSS浮动 10CSS定位 3.JavaScript 11JS导入方式 12JS基本语法 13JS函数 14JS事件 15JSDOM ...
FE-interview:前端知识点总结
05-04
行内元素 div ul ol li dl dt dd h1 p 空元素 <hr> <link> <meta> Html5 浏览器加载原理 首先，开源浏览器一般以8k每块下载html页面。 解析 根据html文件生成DOM tree 根据css文件产生css规则树...
前端css+html+布局笔记
09-14
一般都是使用块元素去包裹内联元素，而不会使用内联去包裹块元素 a元素可以包含任意元素，除了a本身 p元素不能包含任何块元素 伪类和伪元素 伪类和伪元素用来表示元素所处的一个特殊的状态，或者是一个特殊的...
前端小知识：块级元素与行内元素
weixin_46552834的博客
09-02 852
前几天面试的时候面试官问了块级元素和行内元素分别有哪些，区别是什么。这是大二学的知识（目前大四），被面试官问得脑子一片空白，其实这是比较基础的问题了（菜是原罪和T_T），有些时候都是打代码需要用的时候会用，至于为什么就说得支支吾吾了。。。面试结束后，我就马上复习起来了hhh，现在和大家分享一下： 一、块级元素 每个块级元素通常都会独占一行或者是多行，可以对其单独设置高度,宽度以及对齐等属性。 常见的块级元素有：<div>、<p>、<ul>、&l...
前端基础——双单标签、行内块级元素、路径、常用标签
qq_52301431的博客
03-19 3725
前端的基础与学习，前端的双单标签、行内块级元素、路径、常用标签。
前端基础知识回顾——行内元素与块级元素
清颖的博客
01-18 1276
默认情况下，行内元素不会以新行开始，而块级元素会新起一行。 一般情况下，行内元素只能包含数据和其他行内元素；而块级元素可以包含行内元素和其他块级元素。
Web前端技术分享：什么是块元素?什么是行内元素?
xiaoxijinger的博客
07-07 1449
什么是块元素？什么是行内元素？想必学习web前端知识的同学们，课上都会有提到这一方面，如果对这个知识点还不是很熟悉，可以看看下面小千整理的内容。 什么是块元素？什么是行内元素？ HTML标签语言提供了丰富的标签，用于组织页面结构。为了使页面结构的组织更加轻松、合理，HTML标签被定义成了不同的类型，一般分为块元素和行内元素，也称为块标签和行内标签，了解它们的特性可以为使用CSS设置样式和布局打下基础。 1. 块元素 块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自占据一行或多行，可以对其
深入了解标准流以及脱标元素的特点
qq_52732369的博客
12-23 449
深入了解标准流以及脱标元素的特点
前端总结：块级元素和行内元素及其区别
热门推荐
鄙人kunzhi96，感恩遇见！
03-23 1万+
我们知道判断行内元素和块级元素的快捷方法就是判断是否能并列，下面我们就块级元素和行内元素做个分类，并看一下具体区别： 大多数 HTML 元素被定义为块级元素或内联元素。“块级元素”译为 block level element，“内联元素”译为 inline element。 块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度。 行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行...
【前端面试】行内元素与块级元素
前端之路
10-04 2439
1.分类判断行内元素和块级元素的快捷方法就是判断是否能并列。 块级元素 行内元素 2.不同点（1）块级元素会独占一行，其宽度自动填满其父元素宽度； 行内元素不会独占一行，相邻的行内元素会排列在同一行，直至一行排不下才会换行，其宽度随元素的内容而变化。 （2）块级元素可以包含行内元素和块级元素；行内元素不能包含块级元素。 （3）行内元素设置width、height、margin-top、m
行内块元素高度撑满父元素
weixin_46019220的博客
08-13 1423
最近遇到了一个css问题；问题如下 父元素不设置高度，子元素全为（display:inline-block），左侧内容撑开高,想要右侧子元素高度为100%（即与左侧子元素高一致），使用height:100%,并不好使，始终是内容撑开的高，而非父级高， <li v-for="list in lists”> //父元素 <div>{{list.name}}</div> //左侧子元素 <div><p v-for="item in list.ch..
前端面试题-01块元素行内元素行内块元素
craneEnd的博客
04-16 359
一、块元素的特性 block element 独霸一行，总是在新行上开始 宽度缺省是它父级元素的100%，除非设定一个宽度 高度、行高、外边距、内边距都可以设置 可以容纳其他内联元素或者其他块元素 常见块级元素 div ，p ，ul , li ,h1-h6… 二、行内元素的特性inline element 和其他元素都在一行上，遇到父级元素边界会自动换行 高、行高以及内外边距都不可以改变 宽度与内容一样宽，且不可改变 行内元素只能容纳文本或者其他行内元素对于行内元素，需要注意的是.
css块元素自动换行
12-29
CSS块元素自动换行可以通过以下两种方式实现： 方式一：使用inline-block属性 ```css .parent { width: 200px; /* 设置父元素宽度 */ } .div1, .div2 { display: inline-block; /* 设置子元素为行内块元素 */ width: 100px; /* 设置子元素宽度 */ } ``` 方式二：使用flex布局 ```css .parent { display: flex; /* 设置父元素为flex布局 */ flex-wrap: wrap; /* 设置子元素自动换行 */ } .div1, .div2 { width: 100px; /* 设置子元素宽度 */ } ``` 这两种方式都可以实现块元素的自动换行效果。方式一使用inline-block属性将子元素设置为行内块元素，然后设置父元素的宽度，当子元素的宽度超过父元素的宽度时，会自动换行。方式二使用flex布局，将父元素设置为flex布局，并设置flex-wrap属性为wrap，当子元素的宽度超过父元素的宽度时，会自动换行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值