CSS-display样式属性

display样式属性

display属性有很多,这里主要有4种常用的属性分别为

  1. none:此元素不会被显示
  2. block:将元素显示为块级元素,此元素前后会有换行符
  3. inline:默认。此元素会被显示为内联元素,元素前后没有换行符
  4. inline-block:行内块元素

<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style>
			a{	
				border: 1px solid red;
				text-decoration: none;
				/*1.block*/
				display: block;
				height: 100px;
				width: 100px;
			}
		style>
	head>
	<body>
		
		<div style="border: 1px solid red;display: inline;">
			百度一下
		div>
		<br /><br />
		
		<span style="border: 1px solid red;display: block;">
			百度一下
		span>
		<a href="http://www.baidu.com" style="background: #FFFF00;">百度一下a>
		<a href="http://www.baidu.com" style="background: #008000;">百度一下a>
		<a href="http://www.baidu.com" style="background: #0000FF;">百度一下a>
		
		<p style="display: none; border: 1px solid red ;">百度一下p>
	body>
html>

结果
CSS-display样式属性_第1张图片

inline-block


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内块元素title>
    <style>
        p{
            border: 1px solid red;
            display: inline-block;
        }
    style>
head>
<body>
    <p>
        行内块元素
    p>
body>
html>
  • 对于块级元素
    p标签选择器添加inline-block之前
    CSS-display样式属性_第2张图片

p标签选择器添加inline-block之后

CSS-display样式属性_第3张图片

  • 对于行内元素

由于行内元素被边界包裹无法指定所占的长度和宽度,使用display的inline-block属性之后可以调整行内元素所占的长度和宽度。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内块元素title>
    <style>
        span{
            border: 1px solid red;
            /*display: inline-block;*/
            height: 50px;
            width: 100px;
        }
    style>
head>
<body>
    <span>
        行内块元素
    span>
body>
html>

结果
CSS-display样式属性_第4张图片

这里虽然使用选择器给span标签指定了宽度和高度但是并没有作用
把注释去掉之后就可以指定宽度和高度


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内块元素title>
    <style>
        span{
            border: 1px solid red;
            display: inline-block;
            height: 50px;
            width: 100px;
        }
    style>
head>
<body>
    <span>
        行内块元素
    span>
body>
html>

CSS-display样式属性_第5张图片

你可能感兴趣的:(前端)