黑马程序员技术交流社区
标题: 技术贴 [打印本页]
作者: 18861855337 时间: 2020-4-3 23:50
标题: 技术贴
html是结构；
css是表现；
有序列表；<ol></ol>中包含几个<li></li>
无序列表，<ul></ul>中包含几个<li></li>
自定义列表;<dl></dl>第一个是<dl></dl>再加几个<dd></dd
表单
<input tupe=""name="" value="" checked="checked">
button点击按钮；checkbox复选框; image图像形式的提交; password密码框; radio单选按钮;
reset重置按钮; submit 提交注册; text输入字段。
<textarea></textarea>是可以书写多行内容；
<select> <option></option></select>是下拉表单
<lable for=""><lable> < id="">
粗体（strong/b）、斜体（em/i）、删除线（del/s）、下划线（ins/u）
div （一行一个） span（一行可显示多个）
img标签（属性：Alt 如果img内容不显示，则显示Alt所指的内容
title 鼠标悬浮在图片上时显示文本值 可以给图像设置width，height（宽高设置一个就行，会进行一个等比例缩放），边框border）
cellspacing 单元格间距 (是指两个盒子之间的距离）
cellpdding单元边框与其内容之间的空白，默认一（内部距离） 是盒子与内容之间的距离
rowspan （跨行）
coispan （跨列）
< a href=跳转目标 target=目标窗口的弹出方式>文本或图像</a>
target用于指定页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式
css写在<style></style>里面
*{margin:0; padding;0;} li{list-style:none}是常用的
选择器分五种：标签选择器、类名选择器、id选择器、多类名选择器、通配符。
字体设置：复合写法有顺序：font-style font-weight (font size fonu-famly)一定要有
颜色的设置；text-align text-decoration color text-indent line-height
复合选择器包含；后代选择器、子选择器、复合选择器之并集选择器、伪类选择器。
a:link 未访问的链接
a:visited已经被访问的链接
a:hover鼠标经过所显示的颜色
a:active鼠标点下未松开时的颜色:
1：块元素。<div> <p> <h>
一行只能显示一个。可设置宽和高
2：行内元素
<a> <strong> <em> <span>
不可以设置宽和高，一行可以显示多个。
3；行内块元素，<input> <select> <textarea>
可设置宽高
转块元素：diaplay:block;
转行内元素display:inline
转行日内元素display:inline-block
background-color背景颜色
background-image：url()插入背景图片
background-repeat是否平铺
background-position:x y图片放置位置
background-attachment图片是否固定还是滚动
css的三大特点
1、层叠性；权重相同，就近原则，样式不冲突
2、继承性；子元素继承父元素。文本、文字、行高、加粗、字体加粗
3、优先级；!important>行内样式style>id选择器>类选择器、伪类选择器>标签选择器>通配符>继承
border盒子的边框；content内容；padding内边距；margin外边距
复合写法顺序。上右下左。即顺时针
外边距合并问题；两个盒子去最大的值，所以写一个就好
嵌套块元素垂直外边距的塌陷问题，1为其父元素定义上边框。2为其父元素定义上内边距.3为其父元素添加overflow:hidden
设置圆角.border-radius:
盒子阴影；box-shadow
定位模式分为：相对定位、绝对定位、固定定位。
定位的盒子居中对齐
问题描述：如果盒子的显示模式为块元素，而且有固定的宽度我们可以直接用margin：auto;让盒子水平居中；如果盒子定位了margin:auto;不会生效，那我们如何让定位的盒子居中显示？
01、如果用了相对定位position: relative;盒子还是可以同margin: auto;居中；
02、那么如果用了绝对定位position: absolute;和固定定位position: fixed;盒子就不能使用margin:auto；居中显示：
解决方案：
设置定位盒子的left :50%; 设置盒子的margin-left:-自己的宽度的一半，让盒子水平居中；
设置定位盒子的top :50%; 设置盒子的margin-top:-自己的高度的一半，让盒子垂直居中；
如果盒子用了相对定位，盒子依然能用margin：auto让定位的盒子居中显示，绝对定位不能。
1> 静态定位
没有边偏移，很少使用
2>相对定位relative
是以自己原来的位置为参照点移动的。
特点；占位，不脱标
3>绝对定位absolute
没有父元素或父元素没定位，则以可是浏览器区域定位
如果父元素有定位，则以最近一级的定位为参考点移动，（即子绝父相）
特点，脱标不占位
4>固定定位fixed
跟父元素无关，不随滚动而滚动
特点，脱标不占位
行内样式表（行内式）是在元素标签内部的 style 属性中设定 CSS 样式
内嵌样式表是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中
外部样式表（链接式）样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用.
绝对定位，固定定位会压住盒子。但，浮动不会压盒子。
cs的书写书序
1、布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2、自身属性：width / height /hui margin / padding / border / background
3、文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4、其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
浮动：让盒子从普通流中浮起来，让多个块级盒子一行显示；
1、浮动元素和兄弟盒子都浮动了两个盒子都会在一行显示；
2、做布局的时候所有的盒子必须都浮动，才能完成效果；
3、浮动的元素顶端对齐，两个元素之间没有缝隙
浮动：让元素脱离文档流，进行页面效果的布局，浮动的盒子显示模式会变成行内块元素的特点。
纵向排列标准流。横向排列是浮动
任何元素都可添加浮动，不需要转换块级、行内块。可直接设置高宽。移动位置后原位置不保留
浮动后margin:auto;就没有用了，一个元素浮动，其他兄弟元素也会浮动
清除浮动常用
双伪元素清除浮动.给父级元素添加。
.clearfix : before,
clearfix : after {content:"";
diaplay:table}
.clearfix : after{clear:both;}
.clearfix{ *zoom:1;}
或给父级添加{ overflow:hidden} 即溢出隐藏
1>diaplay:none隐藏，不在占有原来位置；diaplay：block显示元素
2>visibility;inherit元素可视：visible隐藏 继续占有原来的位置
3>overfloiw.值有：auto，scroll，visible,hidden
....................
。。。。。。
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |