, 

, 

, 

, 

, ... ,

, 

---

, 

, 

, 

, , 
 и некоторые устаревшие.
                                
                            							

								
							
														

						
											

                            
Слайд 58Блочные элементы
Свойство для определения блочного элемента: display: block.

                            							

								
							
														

						
											

                            
Слайд 59Особенности блочных элементов
Блоки располагаются по вертикали друг под другом;
На прилегающих
                                                            

                                    
сторонах элементов действует эффект схлопывания отступов;
Запрещено вставлять блочный элемент внутрь
                                    строчного;
По ширине блочные элементы занимают всё допустимое пространство;
Если задана ширина или высота контента (свойства width и height), то ширина блока складывается из значений width (height), полей, границ, отступов слева и справа (сверху и снизу);
Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока.

                                
                            							

								
							
														

						
											

                            
Слайд 60Анонимный блок
	Если в одном блочном элементе содержатся строчные элементы наряду
                                                            

                                    
с блочными, то вокруг строчных элементов генерируется анонимный блок. Для
                                    таких блоков применяется стиль по умолчанию, а также наследуемый стиль, заданный для его родителя.
                                
                            							

								
							
														

						
											

                            
Слайд 61Строчные элементы
	Строчными называются такие элементы документа, которые являются непосредственной частью
                                                            

                                    
строки. К строчным элементам относятся теги , , , ,  и
                                    др.
	Используются для изменения вида текста или его логического выделения.

                                
                            							

								
							
														

						
											

                            
Слайд 62Строчные элементы
	Свойство для определения строчного элемента:
	display: inline.

                            							

								
							
														

						
											

                            
Слайд 63Свойства строчных элементов
Внутрь строчных элементов допустимо помещать текст или другие
                                                            

                                    
строчные элементы. Вставлять блочные элементы внутрь строчных запрещено;
Эффект схлопывания отступов
                                    не действует;
Свойства, связанные с размерами (width, height) не применимы;
Ширина равна содержимому плюс значения отступов, полей и границ;
Несколько строчных элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости;
Можно выравнивать по вертикали с помощью свойства vertical-align.

                                
                            							

								
							
														

						
											

                            
Слайд 64Анонимный строчный элемент
	Серым цветом на рисунке помечен текст внутри тега 
                                                            

                                    
, а пунктиром анонимные строчные элементы. Для таких элементов задать
                                    стиль напрямую нельзя, он наследуется от родителя.

                                
                            							

								
							
														

						
											

                            
Слайд 65Блочно-строчные элементы
	Блочно-строчный элемент – элемент, по структуре похожий на блочный,
                                                            

                                    
но обтекаемый остальными объектами, как строчный.

                                                                    
                            							

								
							
														

						
											

                            
Слайд 66Блочно-строчные элементы
Внутрь строчно-блочных элементов допустимо помещать текст, строчные или блочные
                                                            

                                    
элементы;
Высота элемента вычисляется браузером автоматически, исходя из содержимого блока;
Ширина равна
                                    содержимому плюс значения отступов, полей и границ;
Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости;
Можно выравнивать по вертикали с помощью свойства vertical-align;
Разрешено задавать ширину и высоту;
Эффект схлопывания отступов не действует.

                                
                            							

								
							
														

						
											

                            
Слайд 67Блочно-строчные элементы
	Свойство для определения блочно-строчного элемента: display: inline-block.

                            							

								
							
														

						
											

                            
Слайд 68Свойство display
	Многоцелевое свойство, которое определяет, как элемент должен быть показан
                                                            

                                    
в документе.
	Синтаксис:


                                                                    
                            							

								
							
														

						
											

                            
Слайд 69Свойство display
	Многоцелевое свойство, которое определяет, как элемент должен быть показан
                                                            

                                    
в документе.
	Синтаксис:

	Свойства:
block — элемент показывается как блочный;
inline — элемент показывается
                                    как строчный;
Inline-block — это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу;
list-item — элемент выводится как блочный и добавляется маркер списка;
none — временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было.

                                
                            							

								
							
														

						
											

                            
Слайд 70Свойство vertical-align
	Выравнивает элемент по вертикали относительно своего родителя, окружающего текста
                                                            

                                    
или ячейки таблицы.
	Синтаксис:


                                                                    
                            							

								
							
														

						
											

                            
Слайд 71Свойство vertical-align
baseline — выравнивает базовую линию текущего элемента по базовой
                                                            

                                    
линии родителя. Если родительский элемент не имеет базовой линии, то
                                    за нее принимается нижняя граница элемента;
bottom — выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех;
middle — выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента;
sub — элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется;
super — элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним;
top — выравнивание верхнего края элемента по верху самого высокого элемента строки.

                                
                            							

								
							
														

						
											

                            
Слайд 72Свойство min-width
	Синтаксис:
	
	Устанавливает минимальную ширину элемента. Если окно браузера по ширине
                                                            

                                    
становится меньше заданной минимальной ширины элемента, то ширина элемента остается
                                    неизменной, а в окне появляется горизонтальная полоса прокрутки.
                                
                            							

								
							
														

						
											

                            
Слайд 73Свойство max-width
	Синтаксис:
	 
	Устанавливает максимальную ширину элемента. Значение ширины элемента будет
                                                            

                                    
вычисляться в зависимости от значений установленных свойств width, max-width и
                                    min-width.

                                
                            							

								
							
														

						
											

                            
Слайд 74Вычисление ширины
	min-width < width < max-width => width
	width < max-width
                                                            

                                    
=> width
	min-width > width > max-width => min-width
	min-width > width
                                    < max-width => min-width
                                
                            							

								
							
														

						
											

                            
Слайд 75Свойство min-height
	Синтаксис:

	Задает минимальную высоту элемента. Значение высоты элемента будет вычисляться
                                                            

                                    
в зависимости от установленных значений свойств height, max-height и min-height.


                                                                    
                            							

								
							
														

						
											

                            
Слайд 76Свойство max-height
	Синтаксис:

	Устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться
                                                            

                                    
в зависимости от значений установленных свойств height, max-height и min-height.


                                                                    
                            							

								
							
														

						
											

                            
Слайд 77Вычисление высоты
	min-height < height < max-height => height
	min-height > height
                                                            

                                    
> max-height => min-height
	min-height > height < max-height => min-height
	min-height
                                    < height => height
	min-height > height => min-height
	min-height < max-height => max-height
                                
                            							

								
							
														

						
									
				


	


				
Скачать презентацию
							
			

				

				


	


				
				

					
Похожие презентации
											

							
								
								
            				Эктопическая беременность
            				 332
            			
							
						
																	

							
								
								
            				1
СИМВОЛ ГОДА
МЫШКА
ЛЕПКА КРУГЛОЙ СКУЛЬПТУРЫ
Педагог:
Голубева Н.В
            				 189
            			
							
						
						


	

											

							
								
								
            				Арктическая пустыня
            				 191
            			
							
						
																	

							
								
								
            				Лекция
Современные модели управления персоналом.
Американская модель
Японская
            				 223
            			
							
						
																	

							
								
								
            				Дәріс 1. Қазақстандағы химиялық өндірістің маңызы және дамуы. Химиялық
            				 285
            			
							
						
																	

							
								
								
            				Жасушаның химиялық құрамы
            				 546
            			
							
						
																	

							
								
								
            				Предмет общей биологии Свойства живого
            				 154
            			
							
						
																	

							
								
								
            				Звуко - буквенный анализ слов
я – е – ё – ю
в начале слова
после гласных
после
            				 422
            			
							
						
																	

							
								
								
            				Консоль или ПК?
            				 264
            			
							
						
																	

							
								
								
            				ЛЕКЦИ Я ПО ФАРМАКОЛОГИИ
            				 231
            			
							
						
																	

							
								
								
            				Спорт и дети
            				 199
            			
							
						
																	

							
								
								
            				Телевизионные сети 
            				 670
            			
							
						
																	

							
								
								
            				почему я люблю заниматься Спортивной гимнастикой?
            				 148
            			
							
						
																	

							
								
								
            				Готовимся к Пасхе
            				 155
            			
							
						
																	

							
								
								
            				Geographical position of GB
            				 174
            			
							
						
																	

							
								
								
            				Антимикробная химиотерапия при септическом шоке:
Подводные камни
или
            				 242
            			
							
						
																	

							
								
								
            				МАЛОВІДОМА ПЕРЕЯСЛАВЩИНА
            				 256
            			
							
						
																	

							
								
								
            				Единый классный час День Солидарности в борьбе с терроризмом
Подготовил:
            				 250
            			
							
						
																	

							
								
								
            				There is – there are
PLAY
More esl games:
DE&AL DE&AL https://vk.com/deandal
            				 181
            			
							
						
																	

							
								
								
            				Неаллельные гены и типы взаимодействия между ними
            				 645
            			
							
						
																

				
			
		
	


	

		

            

                
Обратная связь
				
Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:
Email: Нажмите что бы посмотреть 
            
            

				            
            

                
Что такое TheSlide.ru?
                
Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.

Для правообладателей