黑马程序员技术交流社区

标题: 学习 [打印本页]

作者: 覃晓雅 时间: 2019-4-18 22:46
标题: 学习
1.HTML结构
<html>
   <head>
            <title>标题</tilte>
   </head>
   <body>
            网页主体内容
   </body>
</html>
2.控制文字的常见属性
Font-size  line-height  text-indent  text-align：center/left/right
字体综合写法 font：是否倾斜是否加粗文字大小/ 行高字体；
3.背景
背景的复合写法：background:背景颜色 url(背景图片路径) 平铺方式是否固定 X轴 Y轴；
4.权重计算
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
      !important  提高权重，有提权的效果，有了样式优先生效；
5.边框border
综合写法（工作常用，强制记忆）
border:边框粗细边框线条样式边框的颜色；
6.浮动布局特比注意点
在做浮动布局的时候一般是多个盒子进行布局，父级里面的所有的布局的子盒子都要浮动，不允许只浮动一部分；
7.清除浮动的方法
额外标签法、父级加overflow属性法、使用after伪元素法、使用双伪元素清除浮动；
8.文字在盒子里面水平居中  Text-aline:center line-height=height
9.定位=定位模式+边偏移（left、right、top、bottom）
10.定位的分类
静态定位：position:static;（不用，自动忽略）
相对定位：position:relative;
绝对定位：position:absolute;
固定定位：position:fixed;
相对定位：position:relative;
11.overflow:hideen;的常用技巧（重点）
01 overflow:hideen;可以让超出固定范围的内容隐藏掉；
02 overflow:hideen;可以清除浮动，布局的时候我们做左右或者左中右布局，都是父级嵌套子级盒子，然后将子级盒子浮动，但是如果没有给父级添加固定的高度，子级浮动以后父级的高度为0，不占位，会影响后面的布局，就给父级添加overflow:hideen;来解决；
03 overflow:hideen; 嵌套的父子级盒子出现外边距塌陷问题，两个嵌套的盒子，都没有浮动或者定位，给子级盒子添加了margin-top就会出现父级跟着掉下来的塌陷问题，就给父级添加overflow:hideen;来解决；
12.溢出的文字省略号显示
步骤（重要常用记住）：
01 设置强制一行显示white-space:nowrap;
02 将强制一行显示后溢出固定盒子宽度的内容隐藏overflow:hidden;
03 将隐藏的内容用省略号显示text-overflow:ellipsis;
13.滑动门原理
•一个父级盒子（必须设置为行内块元素display:inline-block）嵌套一个子级盒子，父级盒子放左侧的圆角，子级盒子放右侧圆角，装内容；
•设置父级盒子的背景图片，设置图片的左对齐默认即可；
   background: url(images/to.png) no-repeat;
•盒子的宽度是内容撑开的，需要给父级盒子和子级添加padding-left和padding-right；
•子级盒子盛放内容，然后设置子级盒子的背景图片，设置图片右对齐；
   background: url(images/to.png) no-repeat top right;
一句话总结：一个a标签嵌套一个span标签，span里面放文字，a要转换为display:inline-block；设置固定的高度：
14.Css实现三角效果
01 设置一个盒子的宽高都为0
02 每一个边都要写不能省略
03 将不现实的边设置为transparent
div {
/*我们用css 边框可以模拟三角效果*/
width: 0; height: 0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid pink;
15.Logo的优化做法
01 、logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要
02、h1里面在放一个链接a，可以返回首页的，给链接a一个和h1一样大小，然后将背景图片加给链接a，在超链接a里面添加网站名称；链接a里面要放文字（网站名称），为了搜索引擎收录我们。但是文字不要显示出来
03、解决文字隐藏问题：
A、要用 text-indent 移到盒子外面（text-indent: -9999px) 然后overflow:hidden 淘宝的做法
B、直接给font-size: 0; 就看不到文字了，京东的做法。
04 最后给连接一个 title 这样鼠标放到logo 上，就可以看到提示文字了
焦点图布局（重点）
一个大div作为父级，里面嵌套ul，ul嵌套li放滚动的图片
切换按钮，一般用两个span或者两个a利用绝对定位搞定
切换小圆点，建议用ol嵌套li，发然后让li左浮动
16.网页书写的规范
01 新建项目文件夹：css文件夹、img（放不经常更改的图片或者装饰图片）、upload（放产品图或者经常改变更换的广告图）、js、必须要有一个index.html网页作为首页，如果后期需要字体图标必须有fonts文件夹；
02 必须将公用样式base.css用link引入，一般不要自己更改，我们需要将里面a:hover删除或者改为自己网站的颜色；
03 新建一个公用的css---- common.css里面放整个网站样式一样的部分的css；
04 其他的每一个页面我们可以单独的新建一个css，比如index.css list.css
17.tab栏原理
tab切换分为两部分第一部分是tab导航，第二部分是tab内容，两者的关系是tab导航里面有几个我们这个tab内容盒子就有几个；
一开始我们的tab导航全部显示display:block;，tab内容盒子只显示一个其他的display:none;隐藏
18.Css3动画过渡
transition: 要过渡的属性花费时间运动曲线何时开始；
如果有多组属性，我们用逗号隔开
transition: width 1s ease 0s, height 1s ease 0s, background-color 1s ease 0s;
all 所有属性都会变化（实际开发中不会分开书写多个属性，除非属性的运时间不同）
   transition: all 1s ease 0s;
过渡写到本身上（谁需要过渡就加给谁）
   transition: all 0.5s;
常用的运动曲线：linear 匀速    ease逐渐慢下来    ease-in 加速    ease-out 减速    ease-in-out 先加速后减速
分页效果制作
一个版心盒子嵌套行内元素或者行内块元素，给版心盒子（父级盒子），利用text-align: center;让文本或者行内元素、行内块元素居中显示的原理，进行居中布局；
19.Css的三大特性：
• 层叠性（覆盖性）、继承性、优先级；
层叠性（覆盖性）
层叠性（就近原则）：如果一个标签书写的样式重叠冲突了，后写的css样式会把先写的样式覆盖掉，样式不冲突的话就不会层叠；
继承性：
有一些css属性子级是可以继承父级的，一般文在控制属性都会被继承，a标签继承color除外，需要单独设置（因为a独特显示，不会继承父级的color，我们需要单独设置）；
能被继承的文字属性：font-size、color、font-weight、font-style、text-indent，text-indent、line-height、text-align: center;、text-decoration:、font-family:
20.并列垂直外边距合并（理解记忆）
环境
如果两个盒子上下垂直排列，给上面的盒子设置margin-bottom，给下面的盒子设置margin-top，两者谁的取值大就显示谁的？
解决方案
只设置一个，我们只需要给上面的盒子margin-bottom或者给下面的盒子给margin-top；
嵌套垂直外边距合并（重点）
问题描述（环境）
如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来；
解决方案：
方案1：给父级盒子添加border-top为1px，划分父级和子级边缘（不建议使用）
方案2：我们直接将子级的margin-top取消，然后设置父级的padding-top，注意加了padding会撑大盒子，需要加多少减多少；（酌情使用）
方案3（强制记忆）：给父级盒子设置overflow: hidden;强制区分父级和子级的关系；
21.盒子阴影
box-shadow:水平阴影垂直阴影模糊距离阴影大小阴影颜色  内/ 外阴影；
实际工作中常用的设置
box-shadow: 水平阴影垂直阴影模糊距离阴影颜色；
22.子绝父相（重点）
为什么要用子绝父相？
相对定位是占位的定位，绝对定位是不占位的定位，实际工作中我们需要不改变父级元素原来占有的位置，如果使用绝对定位的话父级元素占有的位置会被其他盒子占有，影响我们整体布局，所以我就用相对定位进行占位的定位；
应用
子级绝对，父级相对，父级盒子定位了，但是依然占位，不会影响其他盒子的布局；

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2