html回顾随笔1(*^__^*)
1.text—align 与float 区别:
float是针对div一类的容器来说。text-align是对于容器里的文本或者图片来说靠左或靠右水平对齐(vlign 竖直方向)
要注意以下几点:
1、 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以)。
2、 浮动元素后边的非浮动元素显示问题。
3、 多个浮动方向一致的元素使用流式排列,此时要注意浮动元素的高度。
4、子元素全为浮动元素的元素高度自适应问题。
参照:http://blog.sina.com.cn/s/blog_709475a10100wkdj.html
clear:both(还可以为left,right)为清除当前元素的浮动效果;
right增加了float效果,最外层的div 没了高度,所以我们可以通过clear:both来消除悬浮对外框的影响,继而将外层的div撑开
若一个元素向左浮动后,该元素的右边会为下一个元素留出空间,若下一个元素大小能够容纳的话就会尾随,若不是则换行。而clear:both消除了上个元素的浮动,所以下个元素就不会尾随啦~
结合以前的做法我们可以在每个新的div前增加一个属性为空类名一样的 div 如 <div class="clear"></div>
然后我们在css文件中写入 .clear{ clear:both} 这样也能完全消除之前的所有的浮动影响
ps:块级元素独占一行,可以设置宽高以及边距,行内元素不会独占一行,设置宽高行距等不会起效。常见的块级元素有:h1~h6、p、div、ul、table,常见的行内元素有:span、a、input、select等。
2.table相关知识
<tr></tr>表格 行标签 ;<th></th>表头 标签 ;<td></td>单元格 表格内容标签;<caption>我的标题</caption> 表格标题。
table
合并单元格 :colspan 列合并 ; rowspan行合并。
table四角圆化处理
border-radius:3px 4px 5px 6px
代表设置对象左上角3px圆角、右上角4px圆角、右下角5px圆角、左下角6px圆角。
table同一个单元格内 图片与文字垂直居中的问题:
首先将图片左浮动 再将 文字的行高设为图片的高度
3.相关css知识点
margin:3px 2px 1px 0px; 分别为上右下左
margin:3px 2px 1px ; 上3px 左右2px 下1px
margin:0 auto; 居中
css选择器的优先级
css选择器分为 标签选择器, 类选择器,ID选择器 在标签内部写入style=""算是样式的引进,不算是css选择器。
如 .polaris span img{},使用多个选择器加上中间的空格来找到具体的要控制标签。
css选择器优先级导致了可能有些样式设置无效
<span class="beijixing">
beijixing
</span>
<span>
polaris
</span>
</div>
如果已经把.polaris下面span内的字体设置成红色:
.polaris span {color:red;} 或span.polaris {color:red;}
这时,如果要改变.beijixing的颜色为蓝色,用下面的命令是不能实现的:
出现这种情况就是因为后一个命令的优先级不够,两条相互冲突的样式设置,浏览器只会执行优先级较高的那个。
通常选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。
通常我们用1表示标签名选择器的优先级,用10表示类选择器的优先 级,用100标示ID选择器的优先级。
<div style="color:red">polaris</div> 这时候的优先级是最高的。我们给它的优先级是1000 这里是行间样式。
所以如上 .polaris span 优先级为10+1 .beijing的优先级为10 所以自然后面的bule样式无效。
li、td、dd等经常大量连续出现,并且样式相同或者相类似的标签,我们采用类选择器跟标签名选择器结合的后代选择器 .xx li/td/dd {} 的方式选择.
链接
<a></a> 链接标签
<a href="javascript:void(0)" target="_blank">不让百度一下</a> target控制超链接打开窗口属性
我们还可以通过对文本内容设置锚点 来实现页面的简单的导航
如<p> <a id="new1">我是一个是一个好好小樱</a></p> (我们给文本设置了锚点)
< a href="#new1">好小樱在哪?点击可以找到</a>
JS
引入js文件<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
对比引入css文件 <link rel=stylesheet type="text/css" href="..."/>
js大小写敏感
JS创建对象 并为对象创建方法
首先定义一个方法,方法参数为对象属性,方法内 new一个对象,将参数值赋给对象的属性
继而为对象创建方法格式为 object.fucntionName = fucntion(){
....
}
最后返回 对象
随机推荐
- spring boot ----> jpa连接和操作mysql数据库
环境: centos6.8,jdk1.8.0_172,maven3.5.4,vim,spring boot 1.5.13,mysql-5.7.23 1.引入jpa起步依赖和mysql驱动jar包 &l ...
- Kaggle泰坦尼克数据科学解决方案
原文地址如下: https://www.kaggle.com/startupsci/titanic-data-science-solutions --------------------------- ...
- P4426 [HNOI/AHOI2018]毒瘤
挺不错的一个题. 题意即为求一个图的独立集方案数. 如果原图是一棵树,可以直接大力f[x][0/1]来dp. 由于非树边很少,考虑2^11容斥,强制某些点必选,然后再O(n)dp,这样应该过不了. 发 ...
- DedecmsV5.7本地上传缩略图无法自动添加水印的解决方法
问题:dedecms后台 系统->图片水印设置 图片水印设置有开启了,但是本地上传缩略图无法自动添加水印 网上有很多资料,所以记录一下 1.打开dede(实际项目后台文件夹)/archives_ ...
- leetcode-algorithms-21 Merge Two Sorted Lists
leetcode-algorithms-21 Merge Two Sorted Lists Merge two sorted linked lists and return it as a new l ...
- Oracle11g温习-第十八章:role管理
2013年4月27日 星期六 10:52 role 的功能:简化用户的权限管理 建立角色——给角色授权——将角色授予用户/角色 2.查看系统建立的role SYS @ prod > selec ...
- Lunx下 怎样启动和关闭oracle数据库
1.因为oracle运行在Linux系统下,首先,要连接Linux系统 2.切换到oracle安装用户下. 我的是 ora12. 3.运行oracle的环境变量, 以便输入相关命令. 4.进入orac ...
- Hexo+Github 搭建属于自己的博客(Mac下安装 其他操作系统大同小异)
安装前提 参考博客:http://blog.csdn.net/gdutxiaoxu/article/details/53576018#t5(写的很好,不用看我的了.....) 这篇:http://ww ...
- 【转】大型Vuex项目 ,使用module后, 如何调用其他模块的 属性值和方法
Vuex 允许我们把 store 分 module(模块).每一个模块包含各自的状态.mutation.action 和 getter. 那么问题来了, 模块化+命名空间之后, 数据都是相对独立的, ...
- 关于TCP长连接和发送心跳的一些理解
原因 TCP是一种有连接的协议,但是这个连接并不是指有一条实际的电路,而是一种虚拟的电路.TCP的建立连接和断开连接都是通过发送数据实现的,也就是我们常说的三次握手.四次挥手.TCP两端保存了一种数据 ...