17、行内元素

最新推荐文章于 2022-09-15 23:34:08 发布

五仁卤鸡翅

最新推荐文章于 2022-09-15 23:34:08 发布

阅读量208

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/MoonNight608/article/details/106896551

版权

css 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

文章目录

介绍
行内元素

介绍

本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

行内元素

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
.s1{
    background-color:yellow
 
   1、行内元素盒子模型
        - 行内元素不支持设置高度和宽度，内容区大小由内容决定
        - 行内元素可以设置padding，但是垂直方向的 padding 不会影响其它元素布局
        - 行内元素可以设置border ,垂直方向的 borde 不会影响其它布局
        - 行内元素可以设置margin,但是垂直 margin 不会影响其它布局  
        
        
    */
}
.box1{
    width:200px;
    height:200px;
    background-color:#bfs
}
a{
  
    2、dispaly 用来设置元素的显示的类型
          可选值：
             inline 将元素设置为行内元素
             block  将元素设置为块元素
             inline-block 将元素设置为行内块元素,既可以设置宽高，又不会独占一行
             table:将元素设置为表格
             none:元素不在页面显示（不占据位置）
             
    3、visibility 用来设置元素显示状态
         可选值：
           visible 默认值 元素在页面中正常显示
           hidden  元素在页面隐藏 不显示 但是依然占据页面位置
    */
    
    width:100px;
    height:100px
    display:inline-block
    background-color:red
}
               
</style>
<body>
<a href="javascript:;">这是超链接</a>
<span class="s1">我是span</span>
<div class="box1"></div>
   
</body>
</html>