1:内联元素和块级元素

1).块级元素,默认是独自占据一行的。比如是<p>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<ul>、<ol>、<dl>、<pre>、<hr />
2).内联元素，默认是几个内联元素都可以在同一行上显示。比如是<a>、<span>等。
2:内联元素可以变成块级元素，块级元素可以变成内联元素。
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            background-color: aqua;

            /*变为内联元素*/

            display: inline;

        }

        span{

            background-color: brown;

            /*变为块级元素*/

            display: block;

        }

    </style>

</head>

<body>

<div>div wowoowo</div>

<div>div wowoowo</div>

<span>span元素</span>

<span>span元素</span>

</body>

</html>

效果图

3:  display: inline-block;和display: inline的区别

 div{

            background-color: aqua;

            /*变为内联元素可以设置背景颜色大小*/

            display: inline-block;

        }

<!--------------------------------------------->

 div{

            background-color: aqua;

            /*变为内联元素设置背景颜色大小无效*/

            display: inline;

        }

 4: display: inline-table;属性

table{
    /*在表格用才成为行内元素*/
    display: inline-table;
    border: solid 10px #00aaff;
}
5：overflow: auto;属性。它有5个可选值
<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            /*隐藏多余部分*/

            overflow: auto;

            width: 300px;

            height: 150px;

            border: solid 1px orange;

        }

    </style>

</head>

<body>

<div>

<h1>位子</h1>

<p>隐藏多余部分隐藏多余部分隐藏多余部分隐藏多余部分隐藏多余部分1234567890</p>

<p>隐藏多余部分隐藏多余部分隐藏多余部分隐藏多余部分隐藏多余部分1234567890</p>

<p>隐藏多余部分隐藏多余部分隐藏多余部分隐藏多余部分隐藏多余部分1234567890</p>

<p>隐藏多余部分隐藏多余部分隐藏多余部分隐藏多余部分隐藏多余部分1234567890</p>

</div>

</body>

效果图

如果没有overflow: auto;属性的效果图

当然可以设置滑动方向

   /*设置滑动方向*/

    overflow-x: scroll;

    overflow-y: hidden;
/*不让文字进行换行*/
white-space: nowrap;
												


											
css简单学习属性的更多相关文章
	

    
						
  1. css简单学习属性3---css属性选择器
		
    1:通配符 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
    
		
    2. 
								
  2. css简单学习属性2---背景图片
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    3. 
						
  3. 前端学习日记之HTML、CSS 简单总结
		
    前端学习日记之HTML.CSS 简单总结 标签(空格分隔): html css 前端学习日记 html超文本标记语言 一. h标题标签 h1-h7 <!DOCTYPE html> < ...
    
		
    4. 
						
  4. html css的简单学习（三）
		
    html css的简单学习(三) 前端开发工具:Dreamweaver.Hbuilder.WebStorm.Sublime.PhpStorm...=========================== ...
    
		
    5. 
						
  5. html css的简单学习（二）
		
    html css的简单学习(二) <!Doctype html>告诉浏览器,这是一个html文档.lang="en" 默认是en,表示英语:zh-Hans 中文简体:z ...
    
		
    6. 
						
  6. html css的简单学习
		
    html css的简单学习 css的内边距:padding (auto.length.%)(顺序:上.右.下.左)padding-toppadding-leftpadding-rightpadding ...
    
		
    7. 
						
  7. 【转载】CSS font关键字属性值的简单研究
		
    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...
    
		
    8. 
						
  8. DIV+CSS系统学习：转载
		
    第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...
    
		
    9. 
						
  9. CSS Counters 计数属性
		
    CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. idou老师教你学Istio ：5分钟简析Istio异常检测
			
    异常检测 异常检测和踢出异常主机是一个动态检查上游主机是否正常工作,对不健康主机进行移除的过程.异常检测是一种被动健康检查,根据返回状态码来判断是否满足移除条件,最后将主机移除,首先我们来了解下驱逐算 ...
    
			
    2. 
						
  2. PAT Basic 1045 快速排序 (25 分)
			
    著名的快速排序算法里有一个经典的划分过程:我们通常采用某种方法取一个元素作为主元,通过交换,把比主元小的元素放到它的左边,比主元大的元素放到它的右边. 给定划分后的 N 个互不相同的正整数的排列,请问 ...
    
			
    3. 
						
  3. P1396 营救[最短路+二分]
			
    题目描述 “咚咚咚……”“查水表!”原来是查水表来了,现在哪里找这么热心上门的查表员啊!小明感动的热泪盈眶,开起了门…… 妈妈下班回家,街坊邻居说小明被一群陌生人强行押上了警车!妈妈丰富的经验告诉她小 ...
    
			
    4. 
						
  4. axios封装，使用拦截器统一处理接口
			
    1.项目路径下,引入axios.qs依赖 npm install axios npm install qs 2.在项目的src路径下新建一个commJs文件夹,在commJs文件夹里新建aps.js和 ...
    
			
    5. 
						
  5. Docker 退出不关闭容器以及保存日志到本地
			
    Docker保存日志到本地 docker logs +你需要添加的额外参数 + 容器id > 文件名称 然后查看这个文件就可以了,也可以通过ftp协议下载到本地 Docker退出容器不关闭容器的 ...
    
			
    6. 
						
  6. UVA1426 Discrete Square Roots
			
    思路:\(exgcd\) 提交:\(2\)次 错因:输出格式错误OTZ 题解: 求:\(r^2 ≡ x \mod N , 0 \leq r < N\),并且题目会给出 \(x,N\) 和一个合法 ...
    
			
    7. 
						
  7. git 远程代码被覆盖
			
    场景: 解决方法: 第1步. 回退至上一个完整的正确的版本.Git Bash 中输入命令: git reset --hard 1b59cef2a1685c37b7e7b5f2497e055f5e031 ...
    
			
    8. 
						
  8. MySQL 中Redo与Binlog顺序一致性问题
			
    首先,我们知道在MySQL中,二进制日志是server层的,主要用来做主从复制和即时点恢复时使用的.而事务日志(redo log)是InnoDB存储引擎层的,用来保证事务安全的.现在我们来讨论一下My ...
    
			
    9. 
						
  9. oracle数据库GROUP BY 子句
			
    1.GROUP BY子句 在SELECT 列表中所有未包含在组函数中的列都应该包含在GROUP BY 子句中. 如下: SELECT deptno,AVG(sal) from emp GROUP BY ...
    
			
    10. 
						
  10. 「ARC103D」Robot Arms「构造」
			
    题意 给定\(n\)个点,你需要找到一个合适的\(m\)和\(d_1,d_2,...,d_m\),使得从原点出发每次向四个方向的某一个走\(d_i\)个单位,最终到达\((x_t, y_t)\).输出 ...
    
			
    11.