.net label在父容器中占两行显示_页面中常用样式及解决办法

最新推荐文章于 2023-06-13 14:32:57 发布

斯里兰卡七七

最新推荐文章于 2023-06-13 14:32:57 发布

阅读量356

点赞数

文章标签： .net label在父容器中占两行显示

本文链接：https://blog.csdn.net/weixin_42115074/article/details/112111197

版权

本文探讨HTML中的标签元素类型，包括块级、行内和行内块元素，强调了.net label在父容器中占两行显示的问题。讲解了CSS选择器、盒子模型、边距问题以及定位和布局方式，提供了CSS强制不换行、滚动条个性化、表格边框和元素居中等常见问题的解决方案。

摘要由CSDN通过智能技术生成

CSS 指层叠样式表 (Cascading Style Sheets)，样式定义决定如何显示 HTML 元素。
学习网站 http://www. w3school.com.cn/css/css _jianjie.asp

html中的标签元素三种不同的类型

1.块级元素

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<li>、<table> 、<form>

什么是块级元素？设置display:block就是将元素显示为块级元素。如下代码就是将行内元素a转换为块级元素，使a元素具有块级元素特点。

a {display:block;}

每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
元素的高度、宽度以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度(即使设定宽度也占一整行)。

2.行内元素

<a>、<span>、<label>、<br>、<i>、<em>、<strong>、<code>

什么是行内元素？设置display:inline就是将元素显示为行内元素。如下代码就是将块级元素div转换为行内元素，使用div元素具有行内元素特点。

div {display:inline;}

和其他元素都在一行上；
元素的高度、宽度及顶部和底部边距不可设置；
元素的宽度就是它包含的文字或图片的宽度，不可改变。

3.行内块元素

<img>、<input>

行内块元素（inline-block）就是同时具备行内元素、块级元素的特点，代码display:inline-block就是将元素设置为行内块元素。

div {display:inline-block;}

和其他元素都在一行上；
元素的高度、宽度以及顶和底边距都可设置；
元素添加浮动属性后，可理解为其具备行内块元素的特点。

4.注意事项

为了代码规范，行内元素不能嵌套块级元素；行内元素能够嵌套行内元素；块级元素能够嵌套行内元素；块状元素能够嵌套块状元素（除了p元素，p元素不能相互嵌套，但是p元素能够嵌套其他元素）。
不管何种类型的元素margin-left、margin-right、paddind都生效。

css选择器及样式设置

1.常见选择器

元素选择器

div,p,h1 {color:red}

类选择器

<div class="className">div盒子</div>

.className {color:red}

id选择器

<div id="box">div盒子</div>

#box {color:red}

2.选择器优先级

通常可以将css的优先级由高到低分为6组：

！important：无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。
style行内样式：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。
id选择器：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}
类选择器：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}
元素选择器：由一个或多个元素选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}
通配选择器：*{marigin:6px;}

3.选择器的权重及优先规则

|排序|选择器|权重| |:---:|:---|:---:| |1|!important|Infinity| |2|style行内样式|1000| |3|id|100| |4|class/属性/伪类|10| |5|标签/伪元素|1| |6|通配符 *|0|

例子：

<div id="id">
  <div class="class">
      <div class="div">
      </div> 
  </div>
</div>

#id .class div{color:red} //权重111
#id .class .div{color:pink} //权重120

4.注意事项

如果样式的权重相等，则后写的样式会覆盖之前的样式。
如发现自己写的样式不生效，可先排查样式属性是否书写正确，其次考虑样式是否绑定到相应的标签上，再检查是否因权重问题导致样式被覆盖。

盒子模型及边距常见问题

1.盒子模型介绍

css盒子模型(Box Model),包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。理解了这个重要的概念才能更好的排版，进行页面布局

在这张图中，我们发现我们设置的300*400出现在了最里面的那个蓝框中，与此同时我们可以发现在这个盒模型中除了我们设置的内容（content），还有margin（外边距）、border（边框）、padding（内边框）。

而我们在测试效果图看到的350*450盒子，

350（width） = 300（content） + 20（padding） 2 + 5（border） 2 450（height）= 400 （content）+ 20（padding） 2 + 5（border） 2

在标准的盒子模型中，width指content部分的宽度

在IE盒子模型中，width表示content+padding+border这三个部分的宽度

2.box-sizing属性介绍

box-sizing属性很好用，可以省去宽度设置中的加减运算。

box-sizing : border-box;

设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+content。

3.css 外边距合并（叠加）

两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值，如图：

注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。浮动框或绝对定位之间的外边距不会合并。

4.实际应用小问题

margin越界问题（以第一个子元素的margin-top 为例）

当父元素没有边框border时，设置第一个子元素的margin-top值的时候，会出现margin-top值加在父元素上的现象，解决方法有四个：

（1）给父元素加边框border （副作用）

（2）给父元素设置padding值（副作用）

（3）父元素添加 overflow：hidden （副作用）

（4）父元素加前置内容生成。（推荐）

<div class="parent">
    <div class="child"></div> 
</div>
.parent {
     width : 500px;
     height : 500px;
     background-color : red;       
}
.parent : before {
     content : " ";
     display : table;
}

.child {
     width : 200px;
     height : 200px;
     background-color : green;
     margin-top : 50px;
}

2.margin可以给负值。（例： margin-left:-20px）

常见定位与布局方式

1. position定位

常用的position属性的值有三种，relative，absolute和fixed。 - relative：元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。发生偏移的时候，可能会覆盖其他元素。 - absolute：元素框不再占有文档流位置，并且相对于包含块进行偏移(所谓的包含块就是最近一级外层元素position不为static的元素,记住一句话：子绝父相)。 - fixed：元素框不再占有文档流位置，并且相对于视窗进行定位。

与之搭配的是偏移量top、right、bottom、left四个属性。

当使用position属性后就可以设置z-index属性，该属性用来定义当前元素在浏览器上显示的层级。

注：在页面调试过程中若发现元素dom存在，但在浏览器上未显示，可以考虑是否因为z-index设置的值偏低，被其他dom遮挡住了。

2. 浮动

浮动属性float,常见值有left,right,none. 将元素设置浮动属性后，相当于将其变为行内块元素，其具备行内块元素的特性。

注：子元素浮动，父元素无高问题？

设置浮动后，要注意清除浮动。未做清除，那么造成高度塌陷的问题，因为在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷，父元素就没有高度了。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。

常用清除浮动的方法,在父元素中添加overflow:hidden或auto.

3. flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

常用三栏布局 1. flex布局实现：

<div class="wrapper">
    <div class="left">左栏</div>
    <div class="middle">中间</div>
    <div class="right">右栏</div>
</div>
.wrapper{
    display: flex;
}
.left{
    width: 200px;
    height: 300px;
    background: green;
}
.middle{
    width: 100%;
    background: red;
}
.right{
    width: 200px;
    height: 300px;
    background: yellow;
}

除了兼容性，一般没有太大的缺陷

浮动实现

.left{
  width: 200px;
  height: 300px;
  background: green;
  float: left;    
}
.right{
  width: 200px;
  height: 300px;
  background: yellow;
  float: right;
}
.middle{
  height: 300px; 
  background: red; 
  margin-left: 200px; 
  margin-right: 200px;
}

缺点是：1. 当宽度小于左右两边宽度之和时，右侧栏会被挤下去；2. html的结构不正确

定位实现

.wrapper{
    position: relative;
}
.left{
   background: red;
    width: 200px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;   
}
.right{
  height: 300px;
  width: 200px;
  position: absolute;
  top: 0;
  right: 0;
  background: green;
}
.middle{
   height: 300px;
    margin: 0 220px;
    background: yellow;
}

缺点：当父元素有内外边距时，会导致中间栏的位置出现偏差

常见问题及解决方式

1. CSS 强制不换行，多余的文字显示省略号。

单行（部分浏览器还需要加宽度width属性）

{
    white-space: nowrap;    //文本强制不换行
    text-overflow:ellipsis; //文本溢出显示省略号
    overflow:hidden;        //溢出的部分隐藏
 }

多行（目前只支持WebKit浏览器或移动端的页面）

{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; //设置行数
    -webkit-box-orient: vertical;
 }

2. 页面中滚动条常见问题及elementUI组件个性化滚动条的使用。

有时候子元素的宽高为100%，但发现父元素出现了滚动条，可以考虑是否子元素设有padding属性，只需在子元素中加上box-sizing:border-box属性即可。
elementUI源码本身提供了个性化滚动条组件，只是在官网上没有对此组件做说明,用法

<div style="height:200px;">
      <el-scrollbar style="height:100%;" >
        <div style="height:300px;">
        </div>
      </el-scrollbar>
  </div>

  <style scoped>
    >>>.el-scrollbar__wrap{overflow-x: hidden;}
  </style>

3. 实现table的单线边框的方法。

<table border="1">
  <tr>
    <td>11</td>
    <td>22</td>
    <td>33</td>
    <td>44</td>
  </tr>
  <tr>
    <td>11</td>
    <td>22</td>
    <td>33</td>
    <td>44</td>
  </tr>
</table>
table {
  border-collapse: collapse;
  border-color: #ccc;
}

table td {
  height:30px;
  vertical-align: middle;
  width: 40px;
  text-align: center;
  border-color: #ccc;
  color: #999;
}

4. 元素间没有设置边距，但产生缝隙原因。

产生原因：空白间隙主要出现在行内元素中，是由于换行符、空格等不可见字符引起的。（浏览器默认识别一个空格）

解决办法： 1. 删除行内元素之间的换行符、空格等字符，写代码的时候，在标签之间不要有间隙，可以把代码格式化，放在一行显示

给父辈元素设置font-size:0; 该方法需要重新给子元素单独设置字体大小属性
更改代码书写方式

<ul>
  <li>WEB前端</li
  ><li>前端开发</li
  ><li>我是测试</li>
</ul

5. 元素如何居中问题

元素水平居中 1. 使用text-align：center;水平居中

这个属性在没有浮动的情况下，我们可以将块级元素转换为inline/inline-block，然后其父元素加上text-align:center;属性就可以将其居中。如果是行内元素（比如span、img、a等）直接在父元素上添加text-align:center;属性即可。

使用margin:0 auto;水平居中

前提：给元素设定了宽度和具有display：block；的块级元素。

元素垂直水平居中

定位实现居中(需计算偏移值)

原理: 通过定位使元素左上角居中，再通过偏移值margin调整使元素中心居中。

缺点：高度宽度需事先知道。

<div class="absolute_p1">  
  <div class="absolute_c1"></div> 
</div>
.absolute_p1 {  
    position: relative; 
    width: 200px;  
    height: 200px;
}
.absolute_p1 .absolute_c1 {   
  width: 100px;  
  height: 100px; 
  position: absolute; /* fixed 同理 */   
  left: 50%;  
  top: 50%;  
  margin-left: -50px;  
  margin-top: -50px;  /* 需根据宽高计算偏移*/
}

使用flex居中

<div>
    <span>我是span元素</span>
</div>
div{
  border:1px solid red;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;/* 水平居中*/
  align-items: center;/* 垂直居中*/
}

div span{
    background: #ddd;
}

斯里兰卡七七

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
.net label在父容器中占两行显示_页面中常用样式及解决办法

CSS 指层叠样式表 (Cascading Style Sheets)，样式定义决定如何显示 HTML 元素。学习网站 http://www.w3school.com.cn/css/css_jianjie.asphtml中的标签元素三种不同的类型1.块级元素<div>、<p>、<h1>...<h6>、<ol>、<ul>、&...
复制链接

扫一扫