css简单学习属性
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简单学习属性的更多相关文章
- css简单学习属性3---css属性选择器
1:通配符 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- css简单学习属性2---背景图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 前端学习日记之HTML、CSS 简单总结
前端学习日记之HTML.CSS 简单总结 标签(空格分隔): html css 前端学习日记 html超文本标记语言 一. h标题标签 h1-h7 <!DOCTYPE html> < ...
- html css的简单学习（三）
html css的简单学习(三) 前端开发工具:Dreamweaver.Hbuilder.WebStorm.Sublime.PhpStorm...=========================== ...
- html css的简单学习（二）
html css的简单学习(二) <!Doctype html>告诉浏览器,这是一个html文档.lang="en" 默认是en,表示英语:zh-Hans 中文简体:z ...
- html css的简单学习
html css的简单学习 css的内边距:padding (auto.length.%)(顺序:上.右.下.左)padding-toppadding-leftpadding-rightpadding ...
- 【转载】CSS font关键字属性值的简单研究
文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...
- DIV+CSS系统学习：转载
第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...
- CSS Counters 计数属性
CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...
随机推荐
- Ubuntu系统---NVIDIA 驱动安装
Ubuntu系统---NVIDIA 驱动安装 第一次安装“NVIDIA 驱动”,小小的激动,因为终于可以玩GPU了.预想一块GPU,盼望太久,差点放弃,感谢J姐让我捡个漏.但是,第一次新的试错过程,网 ...
- FormCollection使用
FormCollection用来在controller中获取页面表单元素的数据.它是表单元素的集合,包括<input type="submit" />元素. 用法举例: ...
- ArcGIS10.6 通过ArcMap发布二维数据服务。
ArcGIS版本基本每年都会更新,原来一直用10.2,在ArcMap中发布服务: 最近安装10.6整套系统,发现在ArcMap中输入http:id:6080/arcgis 输入用户名,密码 无法登录 ...
- open_window()到底做了什么?
Hlong MainWndID= (Hlong)m_hWnd; open_framegrabber(, , , , , , , , "default", , -, &Acq ...
- EF 多表联查方法
两个表的linq private DataContext dc; dc = new DataContext(); var heji = (from da in dc.q1 ...
- springAop Schedule，注解annotation 实现任务监控
我们有很多定时任务在任务工程中执行,但是如果我们不加以监控,很有可能定时任务死掉或者卡住我们都不知道. 所以需要做一个任务监控.监控任务当前执行的状态. 还是那样,先让定时任务启动起来,当前我们使用的 ...
- java 正则《转载》
Java 正则表达式 正则表达式定义了字符串的模式. 正则表达式可以用来搜索.编辑或处理文本. 正则表达式并不仅限于某一种语言,但是在每种语言中有细微的差别. 正则表达式实例 一个字符串其实就是一个简 ...
- python中闭包的概念
闭包:简单来说,就是一个外部函数的返回值是内部函数的引用 通过一个例子来说明 def outer(a): b = 10 def inner(): print(a+b) return inner # ...
- using来定义类的别名，typedef，#define
宏定义:其实就是替换作用 #define TRUE 1 //结尾无分号,宏名TRUE,计算机会把所有TRUE替换为1. typedef:定义类的别名 tpyedef unsigned int U ...
- django -过滤器的使用
前情提要: 最近工作中用到django 中的 自定制过滤器的内容, 再此 复习一波过滤器和自定制 过滤器的内容 自定制过滤器 1.在settings中的INSTALLED_APPS配置当前app ...